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>

使用js实现表格增加与删除

new document window.onload = function(){ var mytr=document.getElem...
  • qq_35655129
  • qq_35655129
  • 2016年07月25日 10:41
  • 4326

JavaScript动态添加/删除表格行

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

javascript实现表格的添加和删除

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

Html中JavaScript对表格的控制,行和列的增删

初学者,如若有错的地方欢迎指正,定当虚心听教。 以下为例子: 第一行第一列 第一行第二列 第二行第一列 第二行第二列 function ...
  • ArdenSrilank
  • ArdenSrilank
  • 2017年02月15日 20:25
  • 561

Jquery实现表格行的添加、删除

var rowCount=1;  //行数默认4行      //添加行   function addRow(){       rowCount++;       var newRow='选项'+ro...
  • lanbingkafei
  • lanbingkafei
  • 2014年01月15日 13:32
  • 1546

JS实现动态表格的新增,修改,删除操作

1.  首先在页面中配置好一个表格框架 新增参数: 参数列表: 参数名...
  • linwei_1029
  • linwei_1029
  • 2013年03月14日 20:05
  • 14036

jQuery实现表格行的动态增加与删除(改进版)

http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html
  • huangxiaoya1993
  • huangxiaoya1993
  • 2014年07月30日 15:24
  • 994

javascript 可以全选反选删除的表格(比较全面的操作了表格)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     可以全...
  • limlimlim
  • limlimlim
  • 2013年01月29日 11:29
  • 1681

jquery实现动态添加和删除表格

无标题文档 $(document).ready(function (){ $("#submit").click(function (){ //先获取文本框的值 var $name=...
  • HUMHSX
  • HUMHSX
  • 2012年03月22日 21:07
  • 5583

超级简单Table表格添加,删除行

Table表格添加,删除行
  • love_xiolan
  • love_xiolan
  • 2016年08月18日 15:07
  • 1883
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript实现表格的添加和删除
举报原因:
原因补充:

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