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（）方法获取row元素，然后向其中添加一个突出显示的类：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);
   });
});

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

3 个答案: