选中其中一列的复选框时，该复选框所在行的背景色高亮显示（黄色）

最新推荐文章于 2020-08-22 18:28:14 发布

ChengZiYa_

最新推荐文章于 2020-08-22 18:28:14 发布

阅读量244

点赞数

文章标签： css table

本文链接：https://blog.csdn.net/ChengZiYa_/article/details/102770822

版权

选其中一列的复选框时，该复选框变黄色

在这里插入图片描述
基本上效果可以实现
不说那么多直接来上代码

<script src="js/jquery.js"></script>
    <style>
        table,tr,td{
            text-align: center;
            width: 300px;
            height: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<table>
    <tr class="tr">
        <td></td>
        <td>姓名</td>
        <td>薪水</td>
        <td>年龄</td>
    </tr>
    <tr class="tr">
        <td><input type="checkbox"></td>
        <td>张三</td>
        <td>20000</td>
        <td>23</td>
    </tr>
    <tr class="tr">
        <td><input type="checkbox"></td>
        <td>李四</td>
        <td>22000</td>
        <td>22</td>
    </tr>
    <tr class="tr">
        <td><input type="checkbox"></td>
        <td>王五</td>
        <td>14000</td>
        <td>26</td>
    </tr>
    <tr class="tr">
        <td><input type="checkbox"></td>
        <td>马六</td>
        <td>15000</td>
        <td>21</td>
    </tr>

</table>
<script>
    $(function(){
        $("tr:gt(0):even").css("background-color","green");
        $("tr:gt(0):odd").css("background-color","red");

        $(":input").click(function(){
            $(this).parent().parent().css("background-color","yellow");
        });

    });
</script>
</body>

有兴趣的朋友可以尝试一下看看

ChengZiYa_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
选中其中一列的复选框时，该复选框所在行的背景色高亮显示（黄色）

选其中一列的复选框时，该复选框变黄色基本上效果可以实现不说那么多直接来上代码<script src="js/jquery.js"></script> <style> table,tr,td{ text-align: center; width: 300px; ...
复制链接

扫一扫