如何在复选框选择中更改行的背景颜色

Question

我有html表，还有一些带复选框的行。我希望突出显示具有某种背景颜色的行。

<table>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
</table>

Answer 1

1. id应唯一
2. 不要使用内联事件处理程序
3. 不要使用内联样式，使用CSS类
＆＃13;
＆＃13;
$('input[name="chkOrgRow"]').on('change', function() {
  $(this).closest('tr').toggleClass('yellow', $(this).is(':checked'));
});
＆＃13;
.yellow {
  background-color: yellow;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
  <tr>
    <td>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
  <tr>
    <td>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

Answer 2

＆＃13;

＆＃13;

$("[name='chkOrgRow']").change(function() {
  $(this).closest('tr').toggleClass('ColorChange');
});

＆＃13;

.ColorChange{
  background-color: #CCFFCC;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
  <tr>
    <td>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
  <tr>
    <td>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要创建一个功能，检查复选框是否已选中，然后更改它的颜色（如果已选中）。

function selectOrgChildRec(checkBox){  
   if(checkBox.checked==true){
      checkbox.parentNode.background='red';
   }
}

Answer 4

如果您正在使用inline功能，那么您可以使用css类的一行来切换，如下所示：

function selectOrgChildRec(ctrl){
    $(ctrl).closest('tr').toggleClass('active');
}

DEMO

Answer 5

您有元素的重复ID。 ID应始终是唯一的。您可以使用相同的classname tham ID。我还建议您使用jquery而不是内联事件来附加事件：

$('input[name="chkOrgRow"]').on('change', function() {
   $(this).closest('tr').css('background-color', $(this).is(':checked') ? 'yellow': '');
});

<强> Demo

Answer 6

	$("input[type=checkbox]").on('change',function(){
     if($(this).prop('checked')) 
     {
         $(this).parent().parent().css('background-color', '#a52a2a');
     }
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
<table cellpadding="15em" cellspacing="5em" border="2px">
<tr>
	<td><input type="checkbox"></td>
    <td>abc</td>
    <td>1</td>
    <td>1</td>
</tr>
<tr>
	<td><input type="checkbox"></td>
    <td>dbc</td>
    <td>2</td>
    <td>2</td>
</tr>
<tr>
	<td><input type="checkbox"></td>
    <td>pqr</td>
    <td>3</td>
    <td>3</td>
</tr>
<tr>
	<td><input type="checkbox"></td>
    <td>lbc</td>
    <td>4</td>
    <td>4</td>
</tr>
</table>
</body>
</html>