JavaScript实现表格的添加和删除

最新推荐文章于 2022-09-26 13:19:48 发布

toypipi

最新推荐文章于 2022-09-26 13:19:48 发布

阅读量695

点赞数

分类专栏： JavaScript 文章标签： javascript 表格操作 dom 节点添加删除

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文内容来自《11. 尚硅谷佟刚_JavaScript DOM编程添加删除节点的实验》视频教程，版权归期所有，仅作记录以备后查。效果如下：
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script type="text/javascript">
    /*
     * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数:
     * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的
     * 第一个 td 子节点的文本值, 且要去除前后空格.
     * 2. 若点击 "确认" , 则删除 a 节点的所在的 行
     *
     * 注意:
     * 1. a 节点是一个超级链接, 可以在其 onclick 事件中通过返回 false, 来取消默认行为
     * 2. tr 的直接父节点为 tbody, 而不是 table
     * 3. 可以把去除前后空格的代码写成一个 trim(str) 函数. 
     *
     * 为 #addEmpButton 添加 onclick 响应函数:
     * 1. 获取 #name, #email, #salary 的文本框的值
     * 2. 利用 1 获取的文本值创建 3 个 td 节点, 在创建一个 tr 节点. 并把以上的 3 个 td
     *    节点价位 tr 节点的子节点
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
        </tr>
     * 3. 在创建一个 td 节点: <td><a href="deleteEmp?id=xxx">Delete</a></td> 
     * 4. 把 3 创建的 td 也加为 tr 的子节点. 
     * 5. 再把 tr 加为 #employeetable 的 tbody 子节点的子节点.
     * 6. 为新创建的 tr 的 a 子节点添加 Onclick 响应函数, 使其也具备删除的功能. 
     *
     *
     */
        window.onload = function() {
            function removeTr(aNoe) {
                var trNode = aNoe.parentNode.parentNode;
                var textContent = trNode.getElementsByTagName("td")[0].firstChild.nodeValue;
                textContent = trim(textContent);

                var flag = confirm("确定要删除"+ textContent +"的信息吗？");
                if (flag) {
                    trNode.parentNode.removeChild(trNode);
                }
                return false;
            }

            var aNodes = document.getElementById("employeetable").getElementsByTagName("a");
            for(var i = 0;i<aNodes.length;i++) {
                aNodes[i].onclick = function () {
                    removeTr(this);
                    return false;
                }
            }

            document.getElementById("addEmpButton").onclick = function () {
                var nameVal = document.getElementById("name").value;
                var emailVal = document.getElementById("email").value;
                var salaryVal = document.getElementById("salary").value;
                if((nameVal != "") && (emailVal != "") && (salaryVal != "")) {
                    var nameTd = document.createElement("td");
                    nameTd.appendChild(document.createTextNode(nameVal));
                    var emailTd = document.createElement("td");
                    emailTd.appendChild(document.createTextNode(emailVal));
                    var salaryTd = document.createElement("td");
                    salaryTd.appendChild(document.createTextNode(salaryVal));

                    var tr = document.createElement("tr");

                    tr.appendChild(nameTd);
                    tr.appendChild(emailTd);
                    tr.appendChild(salaryTd);

                    var aNode = document.createElement("a");
                    aNode.href = "deleteEmp?id=xxx";
                    aNode.appendChild(document.createTextNode("Delete"));
                    var aTd = document.createElement("td");
                    aTd.appendChild(aNode);
                    tr.appendChild(aTd);

                    aNode.onclick = function () {
                        removeTr(this);
                        return false;
                    }

                    document.getElementById("employeetable").getElementsByTagName("tbody")[0].appendChild(tr);
                }else {
                    alert("请输入用户信息！")
                }

            }
        }

        function trim(str) {
            var reg = /^\s|\s*$/g;
            return str.replace(reg, "");
        }

    </script>
    <style type="text/css">
        .content {
            text-align: center;
        }
    </style>
</head>
<body>

<div class="content">
    <br> <br> 添加新员工 <br> <br> 
    name: <input type="text" name="name" id="name" />&nbsp;&nbsp; 
    email: <input type="text" name="email" id="email" />&nbsp;&nbsp; 
    salary: <input type="text" name="salary" id="salary" /> <br> <br>

    <button id="addEmpButton" value="abc">Submit</button>
    <br> <br>
    <hr>
    <br> <br>
    <table id="employeetable" border="1" cellpadding="5" cellspacing=0 align="center">
        <tbody>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>
                Jerry
            </td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>