0

列ヘッダーをクリックすると行をソートするjqueryテーブルプラグインを使用しています。ヘッダー内の「X」をクリックして列を削除できる機能を実装しようとしています。私のヘッダーは次のよう<th><div class="remove-column">X</div>Total Cases</th> になり、remove-column クラスにクリック イベント リスナーがあります。X をクリックすると、希望どおりに列を非表示にする代わりに、行が並べ替えられます。

テーブルを非表示にする関数は呼び出されていません。これはおそらくスタイリングの問題ですか、それともまったく別の問題ですか?

明確にするためのコードを追加します。バックボーンも使用しています：

イベントリスナー

   events: {
      'click .remove-column': 'removeColumn'
    }

および呼び出される関数:

removeColumn: function(e){
    debugger
    var columnIndex = $(e.currentTarget).parent().index();
    $('table tr td:nth-child('+columnIndex+')')
  }

CSS（少ない）は次のようになります。

   thead {
          tr {
            td, th {
              position: relative;
              .remove-column {
                position: absolute;
                right: 3px;
                opacity: 0.0;
              }
            }
          }
        }
4

2 に答える 2

0

preventDefaultsortメソッドのclickイベントで使用してから、削除する必要があります。次のようなもの。

$(document).ready(function(){
    $('.remove-column').click(function(event){
        event.preventDefault();   //Stop the default action
        $(this).parent().remove();
    });
});

または、メソッドを調べたり、デフォルトの動作を停止するためにevent.stopPropagation使用したりすることもできます。return false;

于 2013-01-03T18:35:14.497 に答える
0

イベントのバブリングを停止する必要があります。e.stopPropagation()イベントのバブリングを停止するために使用します。

$('.remove-column').on('click', function (e) {
   e.stopPropagation();
   //Your code
});
于 2013-01-03T18:29:58.043 に答える