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);
    }
});​

使用的优点是它只将一个事件处理程序.on()绑定到父级（在本例中为 ），用于子级（）。在每一行上使用意味着每个元素都有一个处理程序，这是一种开销。tabletr.click() tr

因此，例如，如果我有一千行，那么当您使用时会有一千个点击处理程序，.click()而不是在使用.tabletr.on()

于 2012-08-01T11:31:22.870 回答
0 
$("#dataTable tbody tr").click(function () {
    $('#dataTable tbody tr.selected').removeClass('selected');
    $(this).addClass('selected');
    gridClickHandler($(this));
});

检查这个jsfiddle，即使是大桌子也能很快工作！

-- 评论后编辑 --

于 2012-08-01T11:28:25.490 回答
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 回答