如何使用jquery在表中选择一行？答案

【问题标题】：How to select a row in table using jquery?如何使用jquery在表中选择一行？
【发布时间】：2016-09-25 05:44:01
【问题描述】：

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

<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 中做同样的事情？

【问题讨论】：

为了解决这个问题，我使用了@nickf 和@cletus 答案的组合。实际上，我想开发 Select: All、None、Active 和 Inactive 复选框，类似于 gmail 所做的。因此，单击我可以选择带有@nickf 答案的行，对于所有和无，我使用@cletus 答案。所以两者都 +1。

标签： jquery select html-table

【解决方案1】：

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

创建一个 CSS 类（上面称为“diffColor”）并以这种方式添加背景颜色，例如：

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

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

【讨论】：

【解决方案2】：

Cletus 的回答是对的，但我觉得可以改进一点：

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

这里唯一真正的区别是：

它只选择第一个父<tr>。 ...你永远不知道你的代码最终会在哪里结束，而且理论上它会快几个滴答声。
它检查复选框的新值并根据需要添加或删除类。如果不检查这一点，其他一些代码可能会更改行上的“diffColour”类，然后您的复选框将被反转，如果您知道我的意思的话。

另外，您也可以考虑将该函数绑定到 change 处理程序：

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

【讨论】：

【解决方案3】：

要选择表格行，您可以使用我编写的一个名为 TableRowSelector 的简单类。查看示例和示例代码here

【讨论】：

您的回答与this answer 相同，并被标记为潜在垃圾邮件。虽然这些答案可能会在某种程度上解决 OP 的问题，但您应该定制您对问题的答案，总结您的文章的内容以及它是如何工作的，最重要的是提供一个有效的示例。谢谢。