Question

我在我的项目中用户Tablesorter一个jQuery插件（我相信其他人都知道）。我需要添加一个功能，当用户点击一行时，它会被选中。我尝试了下面的代码，但是它没有用完。

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

 });

有人可以告诉我最好的方法吗？是否有插件已经为此？

提前致谢，
阿卜杜勒·奥拉卡拉

Answer 1

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

$(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的click事件。您应该使用直播活动进行尝试，看看是否有效：Documentation for live events at jQuery.com

Answer 5

您的点击事件似乎在我的桌子上工作正常，我只是想知道如何通过再次点击取消选择？将变量绑定到是否被选中似乎是一个简单的解决方案，但我该怎么做？

请原谅我用另一个问题和我对JS的新见来回答你的问题。

选择Tablesorter中的行

5 个答案: