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. USART 硬件流控

    流控的概念源于 RS232 这个标准,在 RS232 标准里面包含了串口.流控的定义.大家一定了解,RS232 中的"RS"是Recommend Standard 的缩写,即&qu ...

  2. Less-5闯关失败

    进行第五关的通关还是用之前的方式进行测试以及判断是什么类型的注入.通过判断我们不难发现是字符型注入.但是出了问题,我们会发现按照原来的步骤进行注入都会返回"You are in " ...

  3. ES查询区分大小写

    ES查询区分大小写 ES查询在默认的情况下是不区分大小写的,在5.0版本之后将string类型拆分成两种新的数据类型,text用于全文搜索(模糊搜索),keyword用于关键字搜索(精确搜索). 注意 ...

  4. 奔跑吧linux-第三章实验

    基于树莓派+openeuler平台 实验 3-2:汇编语言练习--查找最大数 1．实验目的 通过本实验了解和熟悉 ARM64 汇编语言. 2．实验要求 使用 ARM64 汇编语言来实现如下功能:在给定 ...

  5. DeWeb和WebXone的区别

    DeWeb和WebXone的区别 相同点: 1 两者为同一开发者研发.QQ:45300355,碧树西风 2 都是为了解决Delphi开发Web的问题 区别: 1 WebXone采用的ActiveX/N ...

  6. （三）lamp环境搭建之编译安装php

    1,PRC (People's republic of China) timezone中设置的时间为中国时间. 2,php的官方镜像源,使用linux时可以直接下载的 http://cn2.php.n ...

  7. vivo 全球商城：商品系统架构设计与实践

    一.前言 随着用户量级的快速增长,vivo官方商城v1.0的单体架构逐渐暴露出弊端:模块愈发臃肿.开发效率低下.性能出现瓶颈.系统维护困难. 从2017年开始启动的v2.0架构升级,基于业务模块进行垂 ...

  8. Linux&C———进程间通信

    管道和有名管道 消息队列 共享内存 信号 套接字 由于进程之间的并不会像线程那样共享地址空间和数据空间,所以进程之间就必须有自己特有的通信方式,这篇博客主要介绍自己了解到的几种进程之间的通信方式,内容 ...

  9. [第二章]c++学习笔记4（复制构造函数）

    性质 (1)只有一个参数,即被同类对象的引用. 注 起作用的三种情况 注 常量引用参数

  10. Redis入门和Java利用jedis操作redis

    Redis入门和Java利用jedis操作redis Redis介绍 Redis 是完全开源的,遵守 BSD 协议,是一个高性能的 key-value 数据库. Redis 与其他 key - val ...