html+css+js动态表格2（基础）（练习）

最新推荐文章于 2022-10-11 00:00:00 发布

好奇心害猫

最新推荐文章于 2022-10-11 00:00:00 发布

阅读量134

点赞数 1

文章标签： js javascript html

本文链接：https://blog.csdn.net/weixin_45380885/article/details/114785696

版权

在这里插入图片描述

需求：
1.全选，全不选，反选
2.左上角方块点击群选
3.鼠标悬停变色
4.删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table {
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td, th {
            text-align: center;
            border: 1px solid;
        }

        div {
            margin-top: 10px;
            margin-left: 30%;
        }

        .out {
            background-color: white;
        }

        .over {
            background-color: pink;
        }
    </style>
    <script>
        //在页面加载完后绑定事件
        window.onload = function () {
            //给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick = function () {
                //全选 获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    //设置每一个cb的状态为选中  checked设置true为选中
                    cbs[i].checked = true;
                }
            }
            //全不选
            document.getElementById("unSelectAll").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = false;
                }
            }
            //反选
            document.getElementById("selectRev").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = !cbs[i].checked;
                }
            }
            //第一个cb
            document.getElementById("firstCb").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    //设置每一个cb的状态和第一个cb的状态一样
                    //this代表第一个cb
                    cbs[i].checked = this.checked;
                }
            }
            var trs = document.getElementsByName("tr");
            //移到元素之上
            for (var i = 0; i < trs.length; i++) {
                trs[i].onmouseover = function () {
                    this.className = "over";
                }
                //移出元素
                trs[i].onmouseout = function () {
                    this.className = "out";
                }
            }
        }
    </script>
</head>
<body>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstCb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>邓紫棋</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>林俊杰</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>欧阳龙基</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
<script>
    function delTr(object) {
        var table = object.parentNode.parentNode.parentNode;
        var tr = object.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>
</html>

好奇心害猫

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
html+css+js动态表格2（基础）（练习）

需求：1.全选，全不选，反选2.左上角方块点击群选3.鼠标悬停变色4.删除<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格全选</title> <style> table { border: 1px solid; width: ..
复制链接

扫一扫