JQuery 点击表格中的复选框使其背景变色

最新推荐文章于 2022-08-02 10:42:55 发布

三三三思

最新推荐文章于 2022-08-02 10:42:55 发布

阅读量912

点赞数 2

分类专栏： jquery css

本文链接：https://blog.youkuaiyun.com/qq_45746493/article/details/102760977

版权

jquery 同时被 2 个专栏收录

4 篇文章

订阅专栏

css

4 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和jQuery实现表格中复选框背景变色的方法。通过toggleClass()函数，当复选框被点击时，其背景颜色会相应变化，实现了交互式效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击表格中的复选框使其背景变色

使用css代码写出页面的布局

    <style>
        table,table td{
            border: 1px solid blueviolet;
            border-collapse: collapse;
        }
    table,table th{
      border: 1px solid blueviolet;
      border-collapse: collapse;
      margin: auto;
    }
        td{
            width: 80px;
            height: 30px;
      text-align: center;
        }
    .odd{
     background-color: #CCCCCC;
    }
    .even{
     background-color: bisque;
    }
    .checked{
     background-color: yellow;
    }
    </style>

html代码写出表格

<table>
    <tr>
        <th></th>
        <th>姓名</th>
        <th>薪水</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>张三</td>
        <td>2000</td>
        <td>18</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>李四</td>
        <td>20000</td>
        <td>38</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>王麻子</td>
        <td>12000</td>
        <td>25</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>马六</td>
        <td>2500</td>
        <td>20</td>
    </tr>
    </table>

最后使用jQuery写出点击使背景颜色变色的效果使用toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

<script>
    $(function(){
       $("tr:odd").addClass("odd");
    $("tr:even").addClass("even");
    $(":checkbox").on("click",function(){
     $(this).parent().parent().toggleClass("checked");
    });
    });
</script>
```**效果**
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191026204820271.gif)