使用复选框更改表格行样式

Question

我有一个动态生成的 n 行表格，每行都有一个复选框。选中复选框时，如何使该表行具有不同的背景颜色？

如果需要，我可以使用 jQuery。

Answer 1

如果您使用的是 jQuery，那就太简单了：

$("tr :checkbox").live("click", function() {
    $(this).closest("tr").css("background-color", this.checked ? "#eee" : "");
});

Live example

基本上，它的作用是识别一行中包含的复选框，观察对它们的点击，然后在事件处理程序中使用它们的状态来设置包含该复选框的行的background-color CSS 样式。

需要考虑扩充/修改的事项：

• 我使用live 以防客户端上的表是动态的（例如，如果您添加或删除行），尽管您可能更喜欢使用以表为根的delegate。如果表格完全是静态的，您可以只使用click。
• 上述钩子所有行内的复选框，这可能比你想要的更多。 jQuery 支持几乎所有的CSS3's selectors 和a fair bit more，因此您可以为复选框制作选择器以使其更窄。一个基本的变化是按类（$("tr :checkbox.foo")，其中“foo”是类）或复选框名称（$("tr :checkbox[name=foo]")）进行过滤。
• 作为Morten suggests below，您可能会考虑添加/删除一个类，而不是直接在代码中提供 CSS 值，因为这有助于将您的脚本与样式分离。

Answer 2

$('tr :checkbox').live('click', function () {
    $(this).closest('tr').toggleClass('selected_row_style');
});

Answer 3

$("checkbox").live("click", function()
{ 
    if (this.checked) 
    {
       $(this).attr('background-color','#FFFFFF');
    }
    else
    {
       $(this).attr('background-color','#000000');
    }
}