DOM给表格添加新⼀⾏和删除整个⾏的内容
DOM⽤appendChild()给表格添加新⼀⾏时，要注意，在HTML中没特别设置<thead>,<tbody>时，会⾃动添加上，所以要选择表格第⼀个元素在添加tr。
// 给表格中的tbody添加新tr
table.firstElementChild.appendChild(tr);
⽤tr.remove() 和veChild('tr')，效果是⼀样的。
// ⽤tr的⽗节点删除tr
veChild(tr);
// ⽤⼦节点删除本⾝
给tr添加新的td的两种⽅式:
PlanA:
　//创建新td
　let td1 = ateElement("td");
　let td2 = ateElement("td");
　let td3 = ateElement("td");
　let td4 = ateElement("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() {
/
html表格元素
/ 获取tr
let tr = this.parentNode.parentNode;
// 获取表格中姓名
let name = tr.firstElementChild.innerHTML;
// 循环体：确认是否删除这个姓名包括的所有信息
if(confirm('确认删除'+name+'吗？')) {
// ⽤tr的⽗节点删除tr
veChild(tr);
}
// 取消则返回不执⾏
return false;
}
// 获取表格的超链接 a
const links = ElementsByTagName('a');
for (let i = 0; i < links.length; i++) {
// 给每⼀个 a 添加点击事件
links[i].onclick = deleteA;
}
// 获取提交按钮
const btn = ElementById('btn');
// 给按钮添加点击事件
// 获取要提交的姓名/邮箱/⼯资
let name = ElementById('name').value;
let email = ElementById('email').value;
let salary = ElementById('salary').value;
// 给表格新增⼀⾏
let newTr = ateElement("tr");
    //给新添加的tr添加td
          newTr.innerHTML = '<td>'+name+'</td>'+
'<td>'+email+'</td>'+
'<td>'+salary+'</td>'+
'<td><a href="javascript:;">删除</a></td>';        //给获取新添加的 a ，添加点击事件
const link = ElementsByTagName('a')[0];
// 获取表格
let employee = ElementById('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</td>
<td>1000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>猪⼋戒</td>
<td>zbj@123</td>
<td>2000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>沙和尚</td>
<td>shs@123</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。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。