JavaScript实现表格的添加和删除

转载 2016年08月30日 11:20:47

本文内容来自《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>

javascript实现表格的添加和删除

注意window.onload()会在网页完成加载后立即执行,我们可以在这个时候为一些元素绑定一些事件响应函数,而一般的函数调用可以写在window.load()函数之外。 代码很简单: ...
  • Artprog
  • Artprog
  • 2016年09月01日 22:07
  • 417

用javascript实现网页中表格的行的添加与删除

制作一个表格,显示班级的学生信息。要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3...
  • ssisse
  • ssisse
  • 2016年04月19日 08:16
  • 526

javascript表格单元格的添加删除修改并对其进行移动以及拷贝

html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> p>对表格单元格的添加删...

JavaScript动态操作表格,添加,删除行、列及单元格

js动态操作表格  function init(){        _table=document.getElementById("table"); _table.border="1px";...

JavaScript动态添加/删除表格行

使用原生JavaScript来解决简单的table行动态增删问题
  • sqq0103
  • sqq0103
  • 2016年12月16日 22:23
  • 892

javascript动态添加删除表格数据管理

本文和大家分享一下使用javascript动态添加删除表格数据管理,主要实现功能如下: 点击添加按钮可以添加一个空的可以修改的记录。 点击表格单元格可以修改文本。 修改后实现了保存的接口...

JavaScript动态操作表格实例(添加,删除行,列及单元格)

JavaScript动态操作表格实例(添加,删除行,列及单元格) 2014-09-08 11:19 | 11504人阅读 | 来源 代码如下:       js动态操作表格...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript实现表格的添加和删除
举报原因:
原因补充:

(最多只允许输入30个字)