jQuery 在选择复选框时更改表格行的背景颜色

Question

我的表中有 5 列。第 1 列有一个名为 name="strurl1"、name="strurl2"、name="strurl3" 等的复选框。如果选中，表行背景颜色将从 #f1f1f1 更改为 #e5e5e5 。

我尝试过，但代码不起作用。

主要的CSS是

.overviewtable tbody tr td {
    line-height:normal;
    border-top:1px solid #FFF;
    border-bottom:1px solid #c4c4c4;
    height:35px;
    padding-top:10px;
    padding-bottom:5px;
    background-color:#f1f1f1;
}

.overviewtable tbody tr td.col1 {
    width:316px;
    padding-left:15px;
    border-left:4px solid #FFF;
    font-size:12px;
    color:#999999;
}

表格列被命名为col1、col2、col3、col4和col5。

有什么帮助吗？提前致谢。

Answer 1

您想要突出显示该行吗？使用 .closest() 方法获取行元素，然后向其添加突出显示类： http://jsfiddle.net/etVc8/ 3/

$(function() {
    $('td:first-child input').change(function() {
        $(this).closest('tr').toggleClass("highlight", this.checked);
    });
});

Answer 2

<input type="checkbox"  onclick='highlight(this)'> 1<br>
<input type="checkbox"  onclick='highlight(this)'> 2<br>
<input type="checkbox"  onclick='highlight(this)'> 3<br> 




<script>
    function highlight(obj){
       $(obj).parent().parent().css("background","#000");
    }
</script>

Answer 3

我已在 tbody tr td 类中指定背景颜色，如下所示：

.overviewtable tbody tr td {
  line-height:normal;
  border-top:1px solid #FFF;
  border-bottom:1px solid #c4c4c4;
  height:35px;
  padding:10px 0 5px 0;
  background-color:#f1f1f1;
}

如果我使用以下脚本，则它仅突出显示 col1 即包含复选框的列。我将 col1 到 col5 即要突出显示的整行：

$(function() {
   $('td:first-child input').change(function() {
       $(this).closest('table.overviewtable tbody tr td').toggleClass("highlight", this.checked);
   });
});