jquery - 如何切换父背景？

Question

我有带有复选框的简单表格。当它被选中时 - 我需要更改行的颜色。

<tr height="35">
    <td><input type="checkbox" ></td>
    <td>Name</td>
    <td>Surname</td>
</tr>

目前我用

jQuery('input[type="checkbox"]').click(function(){
    jQuery(this).parent().parent().css('background-color', 'red');
});

但我认为这.parent().parent()不是一个好主意......而且还有一些切换背景的方法？也许在检查或不检查后以某种方式改变蚂蚁？

Answer 1

您可以closest()改用：

$("input[type='checkbox']").click(function(){
    $(this).closest("tr").css("background-color", "red");
});

Answer 2

你可以这样做

  $("input[type='checkbox']").click(function(){
         $(this).parents("tr:first").css("background-color", "red");
  });

参考：http ://api.jquery.com/parents/

演示：http: //jsfiddle.net/qGZPP/

Answer 3

您应该尝试这样做以在复选框单击时切换背景颜色。

jQuery('input[type="checkbox"]').click(function(){
    var self = jQuery(this);
    var parentTr = self.closest("tr");
    if(this.checked)
      parentTr.css('background-color', 'red');
    else 
      parentTr.css('background-color', 'default-color or empty if no default color');
});

检查这个演示