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. 『学了就忘』Linux基础 — 4、VMware安装

    目录 1.VMware介绍 2.VMware主要特点 3.VMware建议配置 4.VMware安装 1.VMware介绍 VMware是一个虚拟PC的软件,可以在现有的操作系统上虚拟出一个新的硬件环 ...

  2. 广域网（ppp协议、HDLC协议）

    文章转自:https://blog.csdn.net/weixin_43914604/article/details/105028759 学习课程:<2019王道考研计算机网络> 学习目的 ...

  3. OpenWrt编译问题记录

    错误一.config.status: error: cannot find input file: `xmetadataretriever/Makefile.in' configure: creati ...

  4. STL 去重 unique

    一.unique函数 类属性算法unique的作用是从输入序列中"删除"所有相邻的重复元素. 该算法删除相邻的重复元素,然后重新排列输入范围内的元素,并且返回一个迭代器(容器的长度 ...

  5. 使用Magisk+riru实现全局改机

    前言 提到全局改机,我们想到修改的不是修改Android源码就是利用Xposed改机,前者成本太高,后者只能修改Java层的数据不够彻底.magisk是Android平台上功能强大的工具,利用它可以随 ...

  6. 你说说RPC的一个请求的流程是怎么样的？

    前言 面试的时候经常被问到RPC相关的问题,例如:你说说RPC实现原理.让你实现一个RPC框架应该考虑哪些地方.RPC框架基础上发起一个请求是怎样一个流程等等.所以这次我就总结一波RPC的相关知识点, ...

  7. [第二章]c++学习笔记5（类型转换构造函数）

    使用例 析构函数 使用例 析构函数和数组 delete运算符导致析构函数的调用

  8. 解决tomcat的404问题

    遇到的问题 点击startup.bat启动tomcat启动成功,但在网页上输入local:8080却显示Access Error: 404 -- Not Found Cannot locate doc ...

  9. hbuilder中webview调试console.log无法输出日志的问题

    遇到这个问题的亲,肯定是用的模拟器来测试的,其实你只要换成真机测试就能打印了,前提是安卓系统. 有问题欢迎留言,如果你觉得这个文章对你有帮助,就请点个赞吧!

  10. Android SeekBar 自定义thumb，thumb旋转动画效果

    简介 某些音乐播放或者视频播放的界面上,资源还在加载时,进度条的原点(thumb)会显示一个转圈的效果. 资源加载完成后,又切换回静态效果.这个效果增强了用户体验. 一般来说有美术人员负责设计和切图. ...