1

私は次のコードを使用しています：

$("#dataTable tbody").on("click", "tr", function (event) {
    if (!$(this).hasClass('row_selected')) {
        $(oTable.fnSettings().aoData).each(function () {
            $(this.nTr).removeClass('row_selected');
        });
        $(this).addClass('row_selected');
        gridClickHandler($(this));
    }
});

行がクリックされたときに、その行がすでに選択されている場合は、何も起こりません。そうでない場合は、すべての行でクラスが削除され、現在の行でrow_selectedクラスが追加されます。

ただし、テーブルに多くの行があるため、これは低速です。現在の遅延では見栄えがよくありません。私が考えたのは、addClassを最初に移動することでした。しかし、そうすると、.eachループがそれを削除します。

この作業をより効率的に（より高速に）行う方法はありますか？

<table id-"dataTable">
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
4

4 に答える 4

4

これがサンプルです

$('table').on('click', 'tr', function() {

    var row = $(this);                 //cache the row

    if(!row.hasClass('selected'){
        row.addClass('selected')       //add class to clicked row
            .siblings()                //get the other rows
            .removeClass('selected');  //remove their classes
        gridClickHandler(row);
    }
});​

を使用する利点は、1 つのイベント ハンドラーのみを子 ( )の親 (この場合は).on()にバインドすることです。各行で使用すると、要素ごとに 1 つのハンドラがあり、これがオーバーヘッドになります。tabletr.click() tr

たとえば、1000 行ある場合、 を使用するときにのすべてのクリック イベントをリッスンするため.click()に のクリック ハンドラのみを使用するのではなく、使用すると 1000 のクリック ハンドラが存在します。tabletr.on()

于 2012-08-01T11:31:22.870 に答える
0

これを試して：-

 $("#dataTable tbody tr").on("click", "tr", function (event) {        
         $("#dataTable tbody tr").removeClass('row_selected');
         $(this).addClass('row_selected');
     }
 });
于 2012-08-01T11:31:50.770 に答える
0 
$("#dataTable").on("click", "tr", function (e) {
    var $this = $(this);
    // this line removes all selected classes from the rows siblings
    $this.siblings().removeClass("row_selected");
    // this line will toggle the selected class,
    // therefore deselecting the row if it has been selected before
    $this.toggleClass("row_selected");
    gridClickHandler($this);
});

または、以前に選択した行をキャッシュします。

(function() {
    var $oldSelected = null;

    $("#dataTable").on("click", "tr", function (e) {
        var $this = $(this);
        // this line removes all selected classes from the rows siblings
        $oldSelected.removeClass("row_selected");
        // this line will toggle the selected class,
        // therefore deselecting the row if it has been selected before
        $oldSelected = $this.addClass("row_selected");
        gridClickHandler($this);
    });

})();

補足として、jQuery 呼び出し (またはそのために繰り返し必要な関数呼び出しの結果) をキャッシュすることは、処理時間を節約するために常に良い考えです。

于 2012-08-01T11:35:53.100 に答える
0 
$("#dataTable tbody tr").click(function () {
    $('#dataTable tbody tr.selected').removeClass('selected');
    $(this).addClass('selected');
    gridClickHandler($(this));
});

このjsfiddleを確認してください。大きなテーブルでも非常に高速に動作します!

-- コメント後に編集 --

于 2012-08-01T11:28:25.490 に答える