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 ...
随机推荐
- linux 内核修炼之道——系统调用
1.问:什么是系统调用? 用户应用程序访问并使用内核所提供的各种服务的途径即是系统调用,也称系统调用接口层. 2.问:为什么需要系统调用? ① 系统调用作为内核和应用程序之间的中间层,扮演了一个桥梁角 ...
- 【java设计模式】（10）---模版方法模式（案例解析）
一.概念 1.概念 模板方法模式是一种基于继承的代码复用技术,它是一种类行为型模式. 它定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的 ...
- 一步一步学ROP之linux_x86篇(蒸米spark)
目录 一步一步学ROP之linux_x86篇(蒸米spark) 0x00 序 0x01 Control Flow Hijack 程序流劫持 0x02 Ret2libc – Bypass DEP 通过r ...
- Java项目中集成钉钉机器人推送消息提醒
前言: 项目中有一个需求,当有新订单产生的时候,希望能够及时通知到业务相关人员进行处理,整体考虑了一下,选用了钉钉机器人提醒功能(公司内部主要也是使用钉钉进行通讯). 操作: 主要分为两部分进行处理: ...
- 攻防世界 WEB 高手进阶区 XCTF Web_php_unserialize Writeup
攻防世界 WEB 高手进阶区 XCTF Web_php_unserialize Writeup 题目介绍 题名考点 PHP反序列化漏洞 正则匹配 Writeup <?php class Demo ...
- Spring Boot 快速整合Swagger
一.前言 Spring Boot作为当前最为流行的Java web开发脚手架,越来越多的开发者选择用其来构建企业级的RESTFul API接口.这些接口不但会服务于传统的web端(b/s),也会服务于 ...
- 前端调试工具DevTools处理网络请求
DevTools处理网络请求 位置:network 1.是否启用网络处理功能 2.清除历史 3.过滤器,自定义筛选 4.是否保留先前的历史,因为每次刷新会删除历史重新加载,选中后新老请求都在可做对比 ...
- 常用的package.json以及React相关
常用的package.json以及React相关 前言 package.json 的简单介绍 简单版的 package.json 必备属性(name & version) name 字段 ve ...
- Django笔记&教程 2-4 视图常用
Django 自学笔记兼学习教程第2章第4节--视图常用 点击查看教程总目录 1 - shortcut 视图函数需要返回一个HttpResponse对象或者其子类对象. 不过很多时候直接手写建立一个H ...
- ajax的post请求获取kfc官网数据
# _*_ coding : utf-8 _*_# @Time : 2021/11/2 13:45# @Author : 秋泊酱 # 1页 # http://www.kfc.com.cn/kfccda ...