Question

我有几张桌子。我正在尝试通过jquery向表中的所有行添加一个类，当我按下链接全部时。如何在不向表中添加类和id的情况下执行此操作。现在，当我在任何表中单击“全部”链接时，类会添加到每个表中的所有行。我不知道如何选择拥有“全部”链接的表。

$(function(){
   $('.table tbody input[type=checkbox]').change(function() {
        $(this).closest('table tbody tr').toggleClass("np-tr-selected", this.checked);
    });
    $(".all").click(function(){
        $('table tbody tr').addClass("np-tr-selected");
    });
})

Answer 1

您可以使用以下代码段：

DEMO jsFiddle

$(function(){
   $('.table tbody input[type=checkbox]').change(function() {
        $(this).closest('tr').toggleClass("np-tr-selected", this.checked);
    });
    $(".all").click(function(){
        $(this).closest('table').find('tbody tr').addClass("np-tr-selected").find(':checkbox').prop('checked', true);
    });
})

Answer 2

您将向表中添加类，而不是所有行，并且执行此操作的方法是从$（this）开始，然后按照html的要求多次执行.parent（），直到您点击表格为止元件。

 <table class="hitme">
  <tbody>
   <tr>
    <td><input type="checkbox" class="someclass" name="somename">

需要类似

的内容

  $('.somename').on('click', function(){
    $(this).parent().parent().parent().parent().addClass('someotherclass');
  })

Answer 3

如果要更改背景颜色并在单击全部时选中复选框，请使用：

$(function(){
   $('.table tbody input[type=checkbox]').change(function() {
        $(this).closest('table tbody tr').toggleClass("np-tr-selected", this.checked);
    });
    $(".all").click(function(){
        $(this).closest('table').find('tr:gt(0)').addClass("np-tr-selected").find('input').prop('checked', true);
    });
})

<强> jsFiddle example

如果您不需要担心复选框，请移除.find('input').prop('checked', true);

Answer 4

你可以这样做：

$(".all").click(function(){
    $('tbody tr', $(this).closest('table')).addClass("np-tr-selected");
});

小提琴：http://jsfiddle.net/Wy22s/24/

jQuery更改表行的背景颜色

4 个答案: