JavaScript_高级_【小案例：动态表格】

最新推荐文章于 2021-06-04 19:55:27 发布

小折老师

最新推荐文章于 2021-06-04 19:55:27 发布

阅读量317

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_41573718/article/details/89460621

版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文通过一个小型案例探讨JavaScript高级特性在创建动态表格中的应用，讲解如何利用JavaScript动态生成和操作表格，实现数据的增删改查功能。

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

【小案例：动态表格】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格全选</title>
    <!--css美化-->
    <style>
        /*【1】*/
        div {
            text-align: center;
            margin: 50px;
        }

        table {
            border: 5px solid darkblue;
            margin: auto;
            width: 600px;
        }

        td, th {
            border: 2px solid;
            text-align: center;
            color: black;
            font-size: 25px;
        }

        .out {
            background-color: white;
        }

        .over {
            background-color: pink;
        }
    </style>


</head>
<body>
<!--【1】-->
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" id="btn_add" value="添加">
</div>
<!--【2】-->
<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);" "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);" "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);" "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>

<!--【js代码区(1)】-->
<script>
    //
    <!--【3】使用innerHTML添加-->
    document.getElementById("btn_add").onclick = function () {
//2.获取文本框的内容
        var id = document.getElementById("id").value;//获取到文本框对象.调用值==获取到了文本框的内容
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

//获取table
        var table = document.getElementsByTagName("table")[0];

//追加一行
        table.innerHTML += "<tr>\n" +
            "<td><input type=\"checkbox\"  name=\"cb\" ></td>" +
            "<td>" + id + "</td>\n" +
            "<td>" + name + "</td>\n" +
            "<td>" + gender + "</td>\n" +
            "<td><a href=\"javascript:void(0);\" \"delTr(this);\" >删除</a></td>\n" +
            "</tr>";
        //2.遍历
//        //给所有tr绑定鼠标移到元素之上和移出元素事件
        var trs = document.getElementsByTagName("tr");
        for (var i = 0; i < trs.length; i++) {
            //移到元素之上
            trs[i].onmouseover = function () {
                this.className = "over";
            }
            //移出元素
            trs[i].onmouseout = function () {
                this.className = "out";
            }
        }

    }
    //
    <!--【4】实现删除功能-->
    //删除方法/删除功能
    //注意:这个方法的参数只能接收this，才能成功删除
    //    参数接收到this=当前这个超链接：（删除）
    function delTr(xingcan) {
        var table = xingcan.parentNode.parentNode.parentNode;//通过传进来的this找到它的父父父节点table
        var tr = xingcan.parentNode.parentNode;//通过传进来的this找到它的父父节点tr

        table.removeChild(tr);//通过父节点删除子节点==只需在table里把tr删除（tr里包含td）
    }
</script>
<!--【js代码区(2)】-->
<script>
    /*
      分析：
          1.全选：
              * 获取所有的checkbox
              * 遍历cb，设置每一个cb的状态为选中  checked

     */

    //1.在页面加载完后绑定事件
    window.onload = function () {
        //2.给全选按钮绑定单击事件
        document.getElementById("selectAll").onclick = function () {
            //全选
            //1.获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            //2.遍历
            for (var i = 0; i < cbs.length; i++) {
                //3.设置每一个cb的状态为选中  checked
                cbs[i].checked = true;
            }
        }

        document.getElementById("unSelectAll").onclick = function () {
            //全不选
            //1.获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            //2.遍历
            for (var i = 0; i < cbs.length; i++) {
                //3.设置每一个cb的状态为未选中  checked
                cbs[i].checked = false;
            }
        }

        document.getElementById("selectRev").onclick = function () {
            //反选
            //1.获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            //2.遍历
            for (var i = 0; i < cbs.length; i++) {
                //3.设置每一个cb的状态为相反
                cbs[i].checked = !cbs[i].checked;
            }
        }

        document.getElementById("firstCb").onclick = function () {
            //第一个cb点击
            //1.获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            //获取第一个cb

            //2.遍历
            for (var i = 0; i < cbs.length; i++) {
                //3.设置每一个cb的状态和第一个cb的状态一样
                cbs[i].checked = this.checked;
            }
        }


//        //2.遍历
//        //给所有tr绑定鼠标移到元素之上和移出元素事件
        var trs = document.getElementsByTagName("tr");
        for (var i = 0; i < trs.length; i++) {
            //移到元素之上
            trs[i].onmouseover = function () {
                this.className = "over";
            }
            //移出元素
            trs[i].onmouseout = function () {
                this.className = "out";
            }
        }

    }

</script>

</body>

</html>

在这里插入图片描述