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. 2万字|30张图带你领略glibc内存管理精髓(因为OOM导致了上千万损失)

    前言 大家好,我是雨乐. 5年前,在上家公司的时候,因为进程OOM造成了上千万的损失,当时用了一个月的时间来分析glibc源码,最终将问题彻底解决. 最近在逛知乎的时候,发现不少人有对malloc/f ...

  2. Trap (陷入/中断) 源码解析

    用户空间和内核空间之间的切换通常称为trap trap的三种形式 系统调用引发 异常发生 设备中断 (时间中断.IO中断.网络中断等) supervise mode的权限 用户态和内核态之间的到底有什 ...

  3. Linux 守护进程原理及实例（Redis、Nginx）

    1. 什么是守护进程 守护进程daemon,是指没有控制终端,运行在后台的进程,通常伴随着系统启动产生,系统关机结束.可以使用命令ps -axj查看系统的守护进程,输出如下所示: 父ID PID 组I ...

  4. pip 常用命令小结

    pip 常用命令小结 pip这个工具我们经常会用到,毕竟python 是一门以第三方库庞大而著名的编程语言,所以我们总会用pip 安装一些依赖库,当然这只是pip 最常用的一个命令,下面就来介绍一下 ...

  5. .net C# 释放内存 例子

    namespace myCommon{    public class SysVar    { [DllImport("kernel32.dll")]        public ...

  6. 在linux 环境下 安装php

    最近打算学写一个php 脚本~ 到了虚拟机环境上发现~没有环境. 只有老老实实去装一个php环境咯. 第一步 去官网下一个包 记得一定要下载tgz格式的 第二步~当然是传上虚拟机上咯~任意目录都可以. ...

  7. mui中openWindow方法的通用封装

    因为做项目跳转新页面和传参的场景太多了,而且有的页面需要的跳转动画也不一样,每次都写一大堆openWindow方法的配置项太麻烦,因此自己简单封装了一个小函数,用来方便webview页面的跳转和传参. ...

  8. Springboot 加载配置文件源码分析

    Springboot 加载配置文件源码分析 本文的分析是基于springboot 2.2.0.RELEASE. 本篇文章的相关源码位置:https://github.com/wbo112/blogde ...

  9. [tc14634]ExtremeSpanningTrees

    保序回归论文题 要求某一个边集为原图的最小生成树,这等价于非树边比所在环(指树上)的所有边小,最大生成树类似 将这些大小关系的限制看作一张有向图,即若要求$w_{i}\le w_{j}$则连边$(i, ...

  10. MyBatis-Plus中如何使用ResultMap

    MyBatis-Plus (简称MP)是一个MyBatis的增强工具,在MyBatis的基础上只做增强不做改变,为简化开发.提高效率而生. MyBatis-Plus对MyBatis基本零侵入,完全可以 ...