如何使用jQuery选择表中的一行？

我在我的应用程序中创建了一个表，我想选择（更改背景颜色）点击复选框的整行，与gmail一样，当我们单击gmail中的复选框时，整行变为黄色。如何使用jQuery选择表中的一行？

<table> 
<tbody> 
<tr> 
<td><input type="checkbox" name="chk" id="chk" /></td> 
<td>My Name</td> 
<td>Description of the job</td> 
</tr> 
</tbody> 
</table>

请告诉我如何在jQuery中做同样的事情？

来源

2009-05-11 Prashant

要解决此问题，我使用了@nickf和@cletus答案的组合。其实我想开发Select：All，None，Active和Inactive复选框，类似于gmail正在做的事情。所以对于单击我可以选择一行@ nickf的答案和全部和无我使用@cletus答案。所以两者都+1。 – Prashant 2009-05-19 05:00:05

$(function() { 
    $("#chk").click(function() { 
    $(this).parents("tr").toggleClass("diffColor"); 
    }); 
});

创建CSS类（称为 “diffColor” 以上）和添加的方式，像背景颜色：

<style type="text/css"> 
tr.diffColor td { background-color: yellow; } 
</style>

不要设置CSS属性直接。尽可能使用类。

来源

2009-05-11 05:28:41 cletus

好解释+1 – ichiban 2009-05-11 05:37:54

克莱的答案是正确的，但我认为可以提高一点：

$(function() { 
    $("#chk").click(function() { 
     $(this) 
      .parents("tr:first") 
      .toggleClass("diffColor", this.checked) 
     ; 
    }); 
});

唯一真正在这里的差别是：

它只选择第一父<tr>。 ......你永远不知道你的代码会在哪里结束，再加上，理论上它会快两倍。
它检查复选框的新值并根据需要添加或删除类。如果你没有检查过这些，如果你知道我的意思，其他代码可能会改变行上的“diffColour”类，然后你的复选框会被倒置。

此外，你可能会考虑到功能结合到change处理程序，以及：

$('#chk').bind('click change', function() { // ... etc

来源

2009-05-11 05:44:11 nickf

对于选择表中的行，你可以使用一个简单的类，我编写的名为TableRowSelector。结帐示例和示例代码here

来源

2011-06-09 20:04:31 dbow

你的答案和[这个答案]（http://stackoverflow.com/questions/2412001/select-table-row-in-jquery/6298535#6298535）是相同的，并被标记为潜在的垃圾邮件。虽然这些答案可能有助于解决OP的问题，但您应该根据问题定制您的答案，总结您的文章的内容及其工作原理，并最好提供一个可行的示例。谢谢。 – Kev 2011-06-09 20:52:23

如何使用jQuery选择表中的一行？

回答

相关问题