使用复选框更改表格样式

Question

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

如果需要,我没有使用jQuery的问题.

Answer 1

如果你正在使用jQuery,那么简单:

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

实例

基本上它的作用是识别行中包含的复选框,查看它们的点击,然后在事件处理程序中使用它们的状态在background-color包含复选框的行上设置CSS样式.

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

• 我使用live的表是在客户端上表是动态的(例如,如果添加或删除行),尽管您可能更喜欢delegate在表中使用root.如果表格完全是静态的,您可以使用click.
• 上面挂钩了行内的所有复选框,这可能比你想要的更多.jQuery支持几乎所有CSS3的选择器以及更多,因此您可以为复选框设计选择器以使其更窄.一个基本的变化是按类过滤($("tr :checkbox.foo")其中"foo"是类)或复选框名称($("tr :checkbox[name=foo]")).
• 正如Morten在下面建议的那样,您可以考虑添加/删除类而不是直接在代码中提供CSS值,因为这有助于将脚本与样式分离.