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

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而是 Root 于表中。如果表是完全静态的，您可能只使用 click .
• 以上 Hook 行内的所有个复选框，这可能比您想要的更多。 jQuery 支持几乎所有 CSS3's selectors和 a fair bit more ，因此您可以为复选框制作选择器以使其更窄。一个基本的更改是按类($("tr :checkbox.foo") 进行过滤，其中“foo”是类)或复选框名称($("tr :checkbox[name =foo]"))。
• 如Morten suggests below ，您可能会考虑添加/删除一个类，而不是直接在代码中给出 CSS 值，因为这有助于将脚本与样式分离。