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基础 — 7、补充：安装Linxu系统时设置硬盘挂载说明

    目录 (1)新建一个/home分区 (2)再创建一个/boot分区. (3)创建一个swap分区 (4)最后剩余的空间全部分给根目录 (5)总结 上一篇在VMwar虚拟机中安装Linux操作系统中ht ...

  2. OKhttp3的使用教程

    首先在build.gradle下的dependencies下添加引用. implementation "com.squareup.okhttp3:okhttp:4.9.0" 然后编 ...

  3. jQuery根据地址获取经纬度

    一.HTML部分 1 @*景区位置*@ 2 <tr> 3 <th>景区名称:</th> 4 <td><input class="txt ...

  4. songwenxin

    # -*- coding: utf-8 -*- import wx from modelmngr_frame import MyFrame1 ############################# ...

  5. poj 2724 Purifying Machine（二分图最大匹配）

    题意: 有2^N块奶酪,编号为00...0到11..1. 有一台机器,有N个开关.每个开关可以置0或置1,或者置*.但是规定N个开关中最多只能有一个开关置*. 一旦打开机器的开关,机器将根据N个开关的 ...

  6. DeWeb发展历程！ 从2015年开始

    有位朋友问: [高中]长兴(667499XX) 2021-01-15 15:52:11 deweb会长期做吗 我查了一下,发现deweb最早从2015开始,算起来已经做了5~6年了,目前已日臻成熟!

  7. TCP/IP概述（网络互联与TCP/IP）

    TCP/IP概述(网络互联与TCP/IP) 用IP实现异构网络互联 从用户角度如何实现异构网络互联: 从用户角度看,实现异构网络互联的关键点就是使各种网络类型之间的差异对自己透明.在TCP/IP协议中 ...

  8. Linux基本命令学习-文件基本操作1

    关机重启 shutdown -h now #立即关机 shutdown -h 5 # 5秒后关机 #重启 shutdown -r now #立即重启 reboot halt #重启 文件相关 系统目录 ...

  9. JMeter 5.4 打开测试计划 报错：Unexpected error

    保存测试计划名为: 新增用户.jmx 关闭 JMeter 再次打开JMeter : 双击 jmeter.bat JMeter 启动 打开 新增用户.jmx Unexpected error. 看上图 ...

  10. 自定义实例默认值 axios.create(config)

    自定义实例默认值 axios.create(config) 根据指定配置创建一个新的axios,也就就每个新 axios 都有自己的配置 新 axios只是没有取消请求和批量发请求的方法,其它所有语法 ...