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 ...
随机推荐
- 一、安装zabbix监控(源码编方式)
首先介绍一下zabbix的运行原理和运行条件. Zabbix监控原理 Zabbix 通过C/S 模式采集数据,通过B/S模式在web 端展示和配置. 被监控端:主机通过安装agent 方式采集数据, ...
- Linux题目学习
一.填空题: 1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件/etc/fstab 中读取要加载的文件系统. 3. Linux文件系统中每个文件用 i节点来标识 ...
- 修改 openssh 版本号
1.查看 sshd 位置 #which sshd 2.查看 /usr/sbin/sshd(二进制文件) 内容 #strings /usr/sbin/sshd | grep nicai 3.修改版本号, ...
- 攻防世界 Misc 新手练习区 如来十三掌 Writeup
攻防世界 Misc 新手练习区 如来十三掌 Writeup 题目介绍 题目考点 佛曰加密.base64.Rot13等加密方法的了解 Writeup 下载并打开附件 联想到佛曰加密,复制内容到 佛曰加密 ...
- 【Python+postman接口自动化测试】(5)抓包工具Fiddler简介
Fiddler简介 Fiddler 4.6 下载 http://www.downza.cn/soft/234727.html 为什么使用Fiddler? 可以抓到请求数据,查看Raw格式/表单格式/J ...
- 在代码生成工具Database2Sharp中增加Vue&Element 工作流页面的快速生成
在我们基于框架开发系统的时候,往往对一些应用场景的页面对进行了归纳总结,因此对大多数情况下的页面呈现逻辑都做了清晰的分析,因此在我们基于框架的基础上,增量式开发业务功能的时候,能够事半功倍.代码生成工 ...
- Java发展的重大事故
1990年,在Sun计算机公司中,由Patrick Naughton.Mi keSheridan 及 James Gosling领导的小组Green Team,开发出的新的程序语言,命名为0ak, 后 ...
- Effective C++ 总结笔记(六)
七.模板与泛型编程 41.了解隐式接口和编译器多态 1.类和模板都支持接口和多态. 2.类的接口是显式定义的--函数签名.多态是通过虚函数在运行期体现的. 3.模板的接口是隐式的(由模板函数的实现代码 ...
- Hadoop HA集群 与 开发环境部署
每一次 Hadoop 生态的更新都是如此令人激动 像是 hadoop3x 精简了内核,spark3 在调用 R 语言的 UDF 方面,速度提升了 40 倍 所以该文章肯定得配备上最新的生态 hadoo ...
- 菜鸡的Java笔记 第二十 - java 方法的覆写
1.方法的覆写 当子类定义了与父类中的完全一样的方法时(方法名称,参数类型以及个数,返回值类型)这样的操作就称为方法的覆写 范例:观察方法的覆写 class A{ public void ...