jQuery更改表格行的背景颜色

Question

我有几个表格。我试图通过jQuery添加一个类到表中的所有行，当我按链接所有。我怎样才能做到这一点，而无需在表中添加类和id。现在类添加到每个表中的所有行，当我点击任何表中的链接“全部”。我不知道如何选择拥有链接“全部”的表。

Here's a fiddle我在想什么。

$(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

你可以这样做是这样的：

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

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

Answer 2

您可以使用下面的代码片段：

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 3

你将添加类表中，不是所有的行，这样做的方法是从$开始（这）然后根据你的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 4

如果你想改变背景颜色，并检查复选框单击所有，使用时：

$(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);