JavaScript基础(26)_dom增删改练习-CSDN博客

本文链接：https://blog.csdn.net/no15870678621/article/details/135556183

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>DOM增删改练习</title>
    <link rel="stylesheet" href="../browser_default_style/reset.css">
    <style>
        table {
            border: 1px black solid;
            /* 表格边框合并 */
            border-collapse: collapse;
            margin-top: 20px;
            margin-left: 20px;
        }

        thead {
            background-color: aquamarine;
        }

        td {
            border: 1px black solid;
            font-size: large;
            text-align: center;
            vertical-align: middle;
            width: 80px;
            height: 22px;
        }

        tr>td:nth-of-type(2) {
            width: 180px;
        }

        a {
            color: blue;
            text-decoration: none;
        }

        form {
            border: 1px black solid;
            width: 320px;
            height: 230px;
            margin-left: 20px;
        }

        .title {
            display: flex;
            width: 100%;
            height: 80px;
            font-weight: bolder;
            font-size: large;
            align-items: center;
            justify-content: center;
        }

        li {
            list-style: none;
            margin: -10px 0px 0px 20px;

        }

        .button_position {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #add_info {
            display: flex;
            width: 100px;
            height: 30px;
            align-items: center;
            justify-content: center;
        }
    </style>
    <script>
        // 创建一个 "删除一行表格数据" 功能的函数
        function delete_tr() {
            // this指向当前调用方法的对象，即：all_anchor[i]。
            var tr = this.parentNode.parentNode;
            // 类似于：var name_td = tr.getElementsByTagName("td")[0].innerHTML;
            var name_td = tr.children[0].innerHTML;
            var flag = confirm("你确实要删除" + name_td + "吗？");
            if (flag) {
                tr.parentNode.removeChild(tr);
            }
            // 结束onclick事件跳转，结束语句执行。
            // 此代码也适用于取消超链接的默认行为，相当于：href = "javascript:;"。
            return false;
        }

        window.onload = function () {
            // 实现删除 "当前表格数据" 按钮功能
            var all_anchor = document.getElementsByTagName("a");
            for (var i = 0; i < all_anchor.length; i++) {
                // 赋值对象内容而不是赋值返回值，所以不需要带();
                all_anchor[i].onclick = delete_tr;
            }

            // 获取 "添加信息" 按钮、找到表格、表身体
            var add_info = document.getElementById("add_info");
            var table = document.getElementsByTagName("table")[0];
            var tbody = document.getElementsByTagName("tbody")[0];

            add_info.onclick = function () {
                // 定义变量接收来自 "用户的输入值"。
                // 注意：表单文本框内的属性不能用innerHTML，只能用value。
                var name = document.getElementsByClassName("name")[0].value;
                var email = document.getElementsByClassName("email")[0].value;
                var salary = document.getElementsByClassName("salary")[0].value;

                // 根据表的节点树，开始创造节点：
                // <tbody>
                //     <tr>
                //         <td>Tom</td>
                //         <td>tom@tom.com</td>
                //         <td>5000</td>
                //         <td><a href="">删除</a></td>
                //     </tr>
                // </tbody>

                // 创建文本节点对象，把用户的输入值赋值给文本节点对象
                var name_textnode = document.createTextNode(name);
                var email_textnode = document.createTextNode(email);
                var salary_textnode = document.createTextNode(salary);
                var author_textnode = document.createTextNode("删除");

                // 创建a元素、添加:href属性
                var a = document.createElement("a");
                a.href = "javascript:;";

                // 给 "超链接a、对应文本节点" 建立父子关系
                a.appendChild(author_textnode);

                // 创建tr、td元素
                var tr = document.createElement("tr");
                var name_td = document.createElement("td");
                var email_td = document.createElement("td");
                var salary_td = document.createElement("td");
                var author_td = document.createElement("td");

                // 给 "各单元格td、对应文本节点、超链接a" 建立父子关系
                name_td.appendChild(name_textnode);
                email_td.appendChild(email_textnode);
                salary_td.appendChild(salary_textnode);
                author_td.appendChild(a);

                // 给tbody、tr、td元素建立父子关系。
                // 没写thead、tbody、tfoot时，编译器会自动添加, 所以记得是tbody而不是table。
                tr.appendChild(name_td);
                tr.appendChild(email_td);
                tr.appendChild(salary_td);
                tr.appendChild(author_td);
                tbody.appendChild(tr);

                // 实现删除 "添加信息后的当前表格数据" 的按钮功能
                var all_anchor = document.getElementsByTagName("a");
                for (var i = 0; i < all_anchor.length; i++) {
                    all_anchor[i].onclick = delete_tr;
                }
            }
        }

    </script>
</head>

<body>
    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>邮件</td>
                <td>工资</td>
                <td>&nbsp</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tom</td>
                <td>tom@tom.com</td>
                <td>5000</td>
                <td><a href="">删除</a></td>
            </tr>
            <tr>
                <td>Jerry</td>
                <td>jerry@sohu.com</td>
                <td>8000</td>
                <td><a href="">删除</a></td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>bob@tom.com</td>
                <td>10000</td>
                <td><a href="">删除</a></td>
            </tr>
        </tbody>
    </table>
    <br><br>
    <form action="">
        <div class="title">添加新员工</div>
        <ul>
            <li>姓名：<input type="text" class="name"></li> <br>
            <li>邮件：<input type="text" class="email"></li> <br>
            <li>工资：<input type="text" class="salary"></li> <br>
        </ul>
        <div class="button_position">
            <input type="button" value="添加信息" id="add_info">
        </div>
    </form>

</body>

</html>

用传统造节点的方式会使得JS部分代码臃肿，逻辑复杂。因此可将JS代码优化，效果如下：

 <script>
        // 创建一个 "删除一行表格数据" 功能的函数
        function delete_tr() {
            // this指向当前调用方法的对象，即：all_anchor[i]。
            var tr = this.parentNode.parentNode;
            // 类似于：var name_td = tr.getElementsByTagName("td")[0].innerHTML;
            var name_td = tr.children[0].innerHTML;
            var flag = confirm("你确实要删除" + name_td + "吗？");
            if (flag) {
                tr.parentNode.removeChild(tr);
            }
            // 结束onclick事件跳转，结束语句执行。
            // 此代码也适用于取消超链接的默认行为，相当于：href = "javascript:;"。
            return false;
        }

        window.onload = function () {
            // 实现删除 "当前表格数据" 按钮功能
            var all_anchor = document.getElementsByTagName("a");
            for (var i = 0; i < all_anchor.length; i++) {
                all_anchor[i].onclick = delete_tr;
            }

            // 获取 "添加信息" 按钮、找到表格、表身体
            var add_info = document.getElementById("add_info");
            var table = document.getElementsByTagName("table")[0];
            var tbody = document.getElementsByTagName("tbody")[0];

            add_info.onclick = function () {
                // 定义变量接收来自 "用户的输入值"。
                // 注意：表单文本框内的属性不能用innerHTML，只能用value。
                var name = document.getElementsByClassName("name")[0].value;
                var email = document.getElementsByClassName("email")[0].value;
                var salary = document.getElementsByClassName("salary")[0].value;

                var tr = document.createElement("tr");
                tr.innerHTML = "<td>" + name + "</td>"
                    + "<td>" + email + "</td>"
                    + "<td>" + salary + "</td>"
                    + "<td><a href='javascript:;'>删除</a></td>";
                tbody.appendChild(tr);

                // 此方式也能实现效果，但有以下缺点：
                // 1、添加信息更改了整个表身的全部数据。降低效率。
                // 2、原先设置表身数据的样式或程序可能会失效。
                // tbody.innerHTML += "<tr>" + "<td>" + name + "</td>"
                //     + "<td>" + email + "</td>"
                //     + "<td>" + salary + "</td>"
                //     + "<td><a href='javascript:;'>删除</a></td>"
                //     + "</tr>";

                // 实现删除 "添加信息后的当前表格数据" 的按钮功能
                var all_anchor = document.getElementsByTagName("a");
                for (var i = 0; i < all_anchor.length; i++) {
                    all_anchor[i].onclick = delete_tr;
                }
            }
        }

    </script>