在 Tablesorter 中选择行

Question

我在我的项目中使用 Tablesorter 一个 jQuery 插件（我确信其他人知道它）。我需要添加一个功能，当用户单击一行时，它会被选中。我尝试了以下代码，但是它不起作用。

$('#myTable tr').click(function(event) {
     $(this).addClass('selected');

 });

有人能告诉我最好的方法吗？是否有任何插件可以实现此目的？

预先感谢，
阿卜杜勒·奥拉卡拉

Answer 1

要通过 jQuery 的toggleClass 启用选择和取消选择切换：

$(document).ready( function() {
    /* jQuery v1.11.1 */
    $( "table.tablesorter tbody tr" ).click(function() {
      $( this ).toggleClass( "selected" );
    });
});

/* CSS for hover row & select/lock the row with color */
table.tablesorter tbody tr:hover td {
    background-color: #f4f5f6;
}
table.tablesorter tbody tr.selected td {
    background-color: #f4f5f6;
}

Answer 2

这对我来说看起来是正确的。您是否为 tr.selected 定义了 CSS 类？

也许当您单击时，您点击了 td 元素而不是 tr。也许您需要使用父级：

http://docs.jquery.com/Traversing/parent

像这样的（未经测试）：

$('#myTable td').click(function(event) {
         $(this).parent("tr").addClass('selected');

 });

Answer 3

你所拥有的看起来是正确的。您是在文档准备好后执行吗？

$(function() {
    $('#myTable tr').click(function() {
         $(this).addClass('selected');
    });
});

或者，您可以使用 live 事件。

$('#myTable tr').live('click', function() {
     $(this).addClass('selected');
});

Answer 4

我认为 Tablesorter 重新创建了整个表，因此这可能就是为什么没有更改的原因，因为它“破坏”了附加到 tr 的单击事件。
您应该使用实时事件进行尝试，看看是否有效：jQuery.com 上的实时事件文档

Answer 5

您的点击事件似乎在我的桌子上运行得很好，我只是想知道您如何通过再次点击来取消选择？将变量与是否被选择绑定似乎是一个简单的解决方案，但我该怎么做呢？

请原谅我用另一个问题来回答你的问题以及我对 JS 的陌生。