jsDOM

最新推荐文章于 2023-10-08 00:00:00 发布

qq_39134392

最新推荐文章于 2023-10-08 00:00:00 发布

阅读量381

点赞数

本文链接：https://blog.csdn.net/qq_39134392/article/details/80500670

版权

1.1 使用JS完成表格的一个隔行换色

1.1.1 1.需求分析

我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息，显示效果如下：

思路分析

1、获取tbody中所有的tr

2、循环遍历tr,索引对2取模为0,说明是偶数设置背景为粉色

<style>
        td {
            border: 1px solid black;
            width: 150px;
            text-align: center;
        }

    </style>

</head>
<body>
<table>
    <thead>
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    </thead>
    <tbody id="tbody">
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>89</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>56</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>34</td>
    </tr>
    <tr>
        <td>4</td>
        <td>赵六</td>
        <td>33</td>
    </tr>
    <tr>
        <td>5</td>
        <td>田七</td>
        <td>23</td>
    </tr>
    <tr>
        <td>6</td>
        <td>王八</td>
        <td>21</td>
    </tr>
    </tbody>

</table>
</body>
</html>
<script>
    //1获取tbody的所有tr
    var tbody=document.getElementById("tbody");
    for(var i=0;i<tbody.rows.length;i++){
        if(i%2==0){
            tbody.rows[i].style.backgroundColor="pink";
        }else{
            tbody.rows[i].style.backgroundColor="yellow";
        }
    }
</script>

1.2 使用JS完成全选和选不选操作

1.2.1 需求分析

我们希望在后台系统实现一个批量删除的操作(全选所有的复选框)，显示效果如下：

分析：

编写表头复选框的单击事件

在事件中获取表单中所有行的复选框

将行复选框的状态设置与表头复选框状态一致即可

<body>
<table>
    <thead>
    <tr>
        <td><input type="checkbox" οnclick="changeCheckBox(this.checked);"> </td>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    </thead>
    <tbody id="tbody">
    <tr>
        <td><input type="checkbox" name="userid" > </td>
        <td>1</td>
        <td>张三</td>
        <td>89</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="userid" > </td>
        <td>2</td>
        <td>李四</td>
        <td>56</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="userid" > </td>
        <td>3</td>
        <td>王五</td>
        <td>34</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="userid" > </td>
        <td>4</td>
        <td>赵六</td>
        <td>33</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="userid" > </td>
        <td>5</td>
        <td>田七</td>
        <td>23</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="userid" > </td>
        <td>6</td>
        <td>王八</td>
        <td>21</td>
    </tr>
    </tbody>

</table>
</body>
</html>
<script>
    function changeCheckBox(check){
         var userids=document.getElementsByName("userid");
        if(check){
            for(var i=0;i<userids.length;i++){
               userids[i].checked=true;
            }
        }else{
            for(var i=0;i<userids.length;i++){
                userids[i].checked=false;
            }
        }
    }

</script>

qq_39134392

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsDOM

1.1 使用JS完成表格的一个隔行换色1.1.1 1.需求分析我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息，显示效果如下：思路分析1、获取tbody中所有的tr2、循环遍历tr,索引对2取模为0,说明是偶数设置背景为粉色&lt;style&gt; td { border: 1px solid black; width:...
复制链接

扫一扫