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。
