DOM给表格添加新一行和删除整个行的内容
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给表格添加新一行和删除整个行的内容的更多相关文章
- dedecms后台添加新变量和删除变量的方法
下面由做网站为大家来介绍dedecms后台添加新变量和删除变量的方法 添加新变量是做什么用的?答:可以在模板内调用的东东. 一.进入网站织梦(Dedecms)后台(以dede5.5为例),依次打开系统 ...
- ASP.NET网页动态添加、更新或删除数据行
ASP.NET网页动态添加.更新或删除数据行 看过此篇<ASP.NET网页动态添加数据行> http://www.cnblogs.com/insus/p/3247935.html的网友,也 ...
- Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格
目录 一.概述 二.效果展示 三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线 四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...
- JavaScript DOM方法表格添加删除
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- Swift - 给表格添加编辑功能（删除，插入）
1,下面的样例是给表格UITableView添加编辑功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,第一个分组处于删除状态,第二个分组处于插入状态 (3)点击删除图标,删 ...
- Javascript DOM 03 表格添加、删除 + 搜索
获取 tBodies.tHead.tFoot.rows.cells 隔行变色 鼠标移入高亮 添加.删除一行 DOM方法的使用 ...
- vim之添加多行和删除多行
1.复制单行和多行. 1)单行复制 在命令模式下,将光标移到将要复制的行处,按“yy”进行复制,按“p”进行粘贴. 2)多行复制 在命令模式下,将光标移到将要复制的行处,按“nyy”进行复制(n代表行 ...
- 使用js为表格添加一行
今天同事问了我一个问题,为表格添加新的行,我用的js写了一下,代码如下: <!DOCTYPE html> <html> <head> <meta charse ...
- Django学习（七）---添加新文章页面
在template中添加add_article.html页面 (form input)请求方法使用post 这个页面涉及到了两个响应函数 1)显示页面的响应函数 2)表单提交的响应函数 add_a ...
随机推荐
- SDIO总线协议
SDIO采用HOST-DEVICE模式,所有通信都由HOST端发命令,DEVICE设备只要解析HOST命令就可与HOST进行通信. SDIO总线的几根线: 1. CLK信号:HOST给DEVICE的 ...
- 超级好用的轻量级JSON处理命令jq
1 简介 jq是一个轻量级的命令行工具,让你可以非常方便地处理JSON数据,如切分.过滤.映射.转化等,就像sed.awk.grep文本处理三剑客一样.jq是用C写的,没有运行时依赖,你可以直接下载可 ...
- 与 Python 之父聊天：更快的 Python！
Python猫注: 在今年 5 月的 Python 语言峰会上,Guido van Rossum 作了一场<Making CPython Faster>的分享(材料在此),宣告他加入了激动 ...
- hdu 2191 珍惜现在，感恩生活（多重背包）
题意: 有N元经费,M种大米,每种大米有单袋价格p元,单袋重量h,以及对应袋数c. 问最多可以买多重的大米. 思路: 经典多重背包,用二进制的方法. 看代码 代码: struct node{ int ...
- 计算机网络漫谈之OSI七层模型和TCP/IP四层模型
在 什么是网络? 中,你已经知道计算机网络是物理连接的"局域网"和工作于这个局域网上的"网络协议",并且我们的重心是网络协议.有关网络协议,按照目前的分层方式主 ...
- JMeter学习笔记--关联
1.什么是关联? 本次请求需要的数据,需要上一步的请求返回给提供的过程. 2.JMeter关联中常用的两种方式 正则表达式提取器 正则表达式提取器用于对页面任何文本的提取,提取的内容是根据正则表达式在 ...
- vs Code配置C++运行和调试环境以及相关问题
vs Code配置C++运行和调试环境以及相关问题 第一步:下载c++插件 第二步:安装编译.调试环境 如果没有Dev-C++下载MinGW 下载地址:https://sourceforge.net/ ...
- 【SVG】为了前端页面的美丽，我选择学习SVG
[SVG]为了前端页面的美丽,我选择学习SVG 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 SVG在之前自学的过程中, ...
- Windows内核中的CPU架构-8-任务段TSS(task state segment)
Windows内核中的CPU架构-8-任务段TSS(task state segment) 任务段tss(task state segment)是针对于CPU的一个概念. 举一个简单的例子,你一个电脑 ...
- 概述C# virtual修饰符
摘要:C#是继C++和Java语言后的又一面向对象的语言,在语法结构,C#有很多地方和C++及Java相似,但是又不同于它们,其中一些关键特别需要引起我们的注意. C# virtual修饰符用于修改方 ...