DOM用appendChild()给表格添加新一行时，要注意，在HTML中没特别设置<thead>,<tbody>时，会自动添加上，所以要选择表格第一个元素在添加tr。

// 给表格中的tbody添加新tr

   table.firstElementChild.appendChild(tr);

用tr.remove() 和tr.parentNode.removeChild('tr')，效果是一样的。

// 用tr的父节点删除tr

   tr.parentNode.removeChild(tr);

// 用子节点删除本身

   tr.remove();

给tr添加新的td的两种方式:

PlanA:

　//创建新td
　let td1 = document.createElement("td");
　let td2 = document.createElement("td");
　let td3 = document.createElement("td");
　let td4 = document.createElement("td");

// 给tr添加新td

tr.appendChild(td1);

tr.appendChild(td2);

tr.appendChild(td3);

tr.appendChild(td4);

PlanB:

tr.innerHTML = '<td></td>'+
　　　　　　　　　'<td></td>'+
　　　　　　　　　'<td></td>'+
　　　　　　　　　'<td></td>';

 

代码实例:

!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

                    #employee{

                        margin: 50px auto;

                        border-collapse: collapse;

                    }

                    #employee td,

                    #employee th{

                        border: 1px solid black;

                        padding: 10px;

                    }

                    form{

                        width: 400px;

                        margin: 0 auto;

                    }

                    form div{

                        margin: 8px 0;

                        text-align: center;

                    }

                </style>

    </head>

    <script>

　　　　　//创建超链接的删除函数

        function deleteA() {

            // 获取tr

            let tr = this.parentNode.parentNode;

            // 获取表格中姓名

            let name = tr.firstElementChild.innerHTML;

            // 循环体:确认是否删除这个姓名包括的所有信息

            if(confirm('确认删除'+name+'吗？')) {

                // 用tr的父节点删除tr

                tr.parentNode.removeChild(tr);

            }

            // 取消则返回不执行

            return false;

        }

        window.onload = function () {

            // 获取表格的超链接 a

            const links = document.getElementsByTagName('a');

            for (let i = 0; i < links.length; i++) {

                // 给每一个 a 添加点击事件

                links[i].onclick = deleteA;

            }

            // 获取提交按钮

            const btn = document.getElementById('btn');

            // 给按钮添加点击事件

            btn.onclick = function () {

                // 获取要提交的姓名/邮箱/工资

                let name = document.getElementById('name').value;

                let email = document.getElementById('email').value;

                let salary = document.getElementById('salary').value;

            // 给表格新增一行

            let newTr = document.createElement("tr");

            　　　　//给新添加的tr添加td

　　　　　　　　　　 newTr.innerHTML = '<td>'+name+'</td>'+

                                    '<td>'+email+'</td>'+

                                    '<td>'+salary+'</td>'+

                                    '<td><a href="javascript:;">删除</a></td>';

　　　　　　　　//给获取新添加的 a ，添加点击事件

            const link = newTr.getElementsByTagName('a')[0];

            link.onclick = deleteA;

            // 获取表格

            let employee = document.getElementById('employee');

            // 给tbody添加新tr

            employee.firstElementChild.appendChild(newTr);

            }

        }

    </script>

    <body>

        <table id="employee">

                    <tr>

                        <th>姓名</th>

                        <th>邮件</th>

                        <th>薪资</th>

                        <th>操作</th>

                    </tr>

                    <tr>

                        <td>孙悟空</td>

                        <td>swk@123.com</td>

                        <td>1000</td>

                        <td><a href="javascript:;">删除</a></td>

                    </tr>

                    <tr>

                        <td>猪八戒</td>

                        <td>zbj@123.com</td>

                        <td>2000</td>

                        <td><a href="javascript:;">删除</a></td>

                    </tr>

                    <tr>

                        <td>沙和尚</td>

                        <td>shs@123.com</td>

                        <td>3000</td>

                        <td><a href="javascript:;">删除</a></td>

                    </tr>

                </table>

                <!-- 创建一个表单 -->

                <form action="#">

                    <div>

                        姓名 <input id="name" type="text">

                    </div>

                    <div>

                        邮件 <input id="email" type="text">

                    </div>

                    <div>

                        薪资 <input id="salary" type="text">

                    </div>

                    <div>

                        <button id="btn" type="button">提交</button>

                    </div>

                </form>

    </body>

</html>

如果在form中的button 没有写type的值，那么会自动添加成 type="submit",页面会发生提交，若不想提交，就给button添加 type="button",或者在给button的函数添加一个返回值 false。

DOM给表格添加新一行和删除整个行的内容的更多相关文章

  1. dedecms后台添加新变量和删除变量的方法

    下面由做网站为大家来介绍dedecms后台添加新变量和删除变量的方法 添加新变量是做什么用的?答:可以在模板内调用的东东. 一.进入网站织梦(Dedecms)后台(以dede5.5为例),依次打开系统 ...

  2. ASP.NET网页动态添加、更新或删除数据行

    ASP.NET网页动态添加.更新或删除数据行 看过此篇<ASP.NET网页动态添加数据行> http://www.cnblogs.com/insus/p/3247935.html的网友,也 ...

  3. Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格

    目录 一.概述 二.效果展示 三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线 四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...

  4. JavaScript DOM方法表格添加删除

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  5. Swift - 给表格添加编辑功能（删除，插入）

    1,下面的样例是给表格UITableView添加编辑功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,第一个分组处于删除状态,第二个分组处于插入状态 (3)点击删除图标,删 ...

  6. Javascript DOM 03 表格添加、删除 + 搜索

    获取 tBodies.tHead.tFoot.rows.cells   隔行变色 鼠标移入高亮   添加.删除一行 DOM方法的使用                                   ...

  7. vim之添加多行和删除多行

    1.复制单行和多行. 1)单行复制 在命令模式下,将光标移到将要复制的行处,按“yy”进行复制,按“p”进行粘贴. 2)多行复制 在命令模式下,将光标移到将要复制的行处,按“nyy”进行复制(n代表行 ...

  8. 使用js为表格添加一行

    今天同事问了我一个问题,为表格添加新的行,我用的js写了一下,代码如下: <!DOCTYPE html> <html> <head> <meta charse ...

  9. Django学习（七）---添加新文章页面

    在template中添加add_article.html页面 (form  input)请求方法使用post 这个页面涉及到了两个响应函数 1)显示页面的响应函数  2)表单提交的响应函数 add_a ...

随机推荐

  1. c语言编程基础入门必备知识

    数据类型 基本数据类型 类型名称说明char字符类型存放字符的ASCII码int整型存放有符号整数short短整型存放有符号整数long长整型存放有符号整数long long存放有符号整数float单 ...

  2. HTML基础强化

    1.如何理解HTML? HTML类似于一份word"文档" 描述文档的"结构" 有区块和大纲 2.对WEB标准的理解? Web标准是由一系列标准组合而成.一个网 ...

  3. sqlldr导入报错：field in data file exceeds maximum length

    检查报错日志提示:field in data file exceeds maximum length REMARK字段设置:varchar2(2000),报错的内容也没有超1000个字符 表中定义的字 ...

  4. 深入探索 Linux listen() 函数 backlog 的含义

    1:listen()回顾以及问题引入 2:正确的解释 3:实验验证 1:listen()回顾以及问题引入 listen()函数是网络编程中用来使服务器端开始监听端口的系统调用,首先来回顾下listen ...

  5. Git 图形化客户端--Sourcetree

    1.图形化客户端: sourcetre下载:https://www.sourcetreeapp.com/ 2.接着并执行SourceTreeSetup-3.1.3.exe,会进入登录或注册bitbuc ...

  6. mysqld：未被识别的服务(解决方法)

    启动Mysql:sudo service mysqld start 执行该命令时,提示错误   mysqld:未被识别的服务,如图 解决办法如下: 1·.首先要找到 mysql.server 文件 命 ...

  7. 谷粒 | 10 | 阿里云OSS存储对象服务

    阿里云OSS对象存储服务 准备工作 1.在service模块新建子模块service_oss 2.引入pom.xml文件中引入oss服务依赖 <dependencies> <!--a ...

  8. 2021中国能源网络信息安全大赛wp

    FROM TEAM BINX Web ezphp CODE 将base64解了之后得到: $O0O000="rFqQmguebyiVTBwlWAJYRhsHXfpojxEndNGkZICDL ...

  9. django前后端分离403 csrf token missing or incorrect

    根据这个链接https://stackoverflow.com/a/26639895 这是一个django的跨域访问问题. django,会对合法的跨域访问做这样的检验,cookies里面存储的'cs ...

  10. Part 32 AngularJS controller as syntax

    So far in this video series we have been using $scope to expose the members from the controller to t ...