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

I have created a table in my application, I want to select (change background color) whole row on click of a checkbox, same as gmail is doing, When we click checkbox in gmail, the whole row becomes yellow.

我在我的应用程序中创建了一个表,我想在单击复选框时选择(更改背景颜色)整行,与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>

Please tell me how to do the same in jquery?

请告诉我如何在jquery中做同样的事情?

3 个解决方案

#1

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

Create a CSS class (called "diffColor" above) and add the background color that way, something like:

创建一个CSS类(上面称为“diffColor”)并添加背景颜色,如:

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

Don't set CSS attributes directly. Use classes where possible.

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

#2

Cletus's answer is right, but I think can be improved a little:

Cletus的答案是对的,但我认为可以稍微改进一下:

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

The only real differences here is:

这里唯一真正的区别是:

that it only selects the first parent <tr>. ...you never know where your code might end up, plus, in theory it'll be a couple of ticks faster.

它只选择第一个父。 ......你永远不知道你的代码最终会在哪里结束,而且理论上它会更快一些。

it checks the new value of the checkbox and adds or removes the class as required. Without checking this, some other code might change the "diffColour" class on the row and then your checkbox would be inverted, if you know what i mean.

它会检查复选框的新值,并根据需要添加或删除该类。如果你知道我的意思,如果没有检查这个,其他一些代码可能会改变行上的“diffColour”类,然后你的复选框就会被反转。

Also, you might consider binding that function to the change handler as well:

此外,您可以考虑将该函数绑定到更改处理程序:

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

#3

For selecting table rows you can use a simple class that I wrote called TableRowSelector. Checkout the example and the example code here

为了选择表行,您可以使用我编写的一个名为TableRowSelector的简单类。在这里查看示例和示例代码

#1

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