1、选中其中一列的复选框时,该复选框所在行的背景色高亮显示(黄色)。

2、取消选中复选框时,所在行的背景色恢复

如图所示:

(一)点击复选框背景色显示黄色 取消选中时恢复-LMLPHP

代码如下所示:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <style>
        .odd{
            background-color: antiquewhite;
        }
        .even{
            background-color: aquamarine;
        }
        .checked{
            background-color: yellow;
        }
    </style>
</head>
<body>
<table>

    <tr>
        <th></th>
       <th>姓名</th>
        <th>薪水</th>
        <th>年龄</th>
    </tr>

    <tr>
    <td><input type="checkbox"/></td>
    <td>张三</td>
    <td>20000</td>
    <td>23</td>
        </tr>
    <tr>
        <td><input type="checkbox"/></td>
    <td>李四</td>
    <td>22000</td>
    <td>22</td>
    </tr>

    <tr>
        <td><input type="checkbox"/></td>
        <td>王五</td>
        <td>14000</td>
        <td>26</td>
    </tr>

    <tr>
        <td><input type="checkbox"/></td>
        <td>马六</td>
        <td>15000</td>
        <td>21</td>
    </tr>
</table>
<div id="show"></div>
<script type="text/javascript">
    $(function(){
        $("tr:odd").addClass("odd");
         $("tr:even").addClass("even");
        $(":checkbox").on("click",function(){
            $(this).parent().parent().toggleClass("checked");
        });
    });

</script>
</body>
</html>
10-27 10:39