Question

我在我的应用程序中创建了一个表，我想在单击复选框时选择（更改背景颜色）整行，与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中做同样的事情？

Answer 1

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

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

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

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

Answer 2

Cletus的回答是正确的，但我认为可以稍微改进一下：

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

这里唯一真正的区别是：

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

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

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

Answer 3

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

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

3 个答案: