如何在复选框选择中更改行的背景色 [英] How to change background color of a row on checkbox selection

问题描述

我有html表，并且还有一些带有复选框的行.复选框的选择我想用某些背景色高亮该行.

I have html table and also had some rows with checkbox. Onselction of checkbox i want to higlight that row with some background color.

<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>

推荐答案

1. id 应该唯一
2. 不要使用内联事件处理程序
3. 不要使用内联样式，请使用CSS类

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

.yellow {
  background-color: yellow;
}

<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>

这篇关于如何在复选框选择中更改行的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！