JS示例27-表格删除removeChild
- 2019 年 11 月 7 日
- 筆記
一、知识要点
1、oTd.getElementsByTagName('a')[0].onclick 2、oTbody.removeChild(this.parentNode.parentNode)
二、源码参考
核心代码
oTd.getElementsByTagName('a')[0].onclick = function() { // 删除操作 oTbody.removeChild(this.parentNode.parentNode); // 删除a的父元素的父元素tr }
<!DOCTYPE > <html> <head> <title></title> <meta charset="utf-8"> <script> window.onload = function() { var oTab = document.getElementById('tab1'); var oTbody = oTab.tBodies[0]; var oName = document.getElementById('name'); // 姓名 var oAge = document.getElementById('age'); // 年龄 var oAddBtn = document.getElementById('add'); // 新增（按钮） var id = oTbody.rows.length + 1; oAddBtn.onclick = function() { var oTr = document.createElement('tr'); var oTd = document.createElement('td'); // ID oTd.innerHTML = id++; // 自增ID oTr.appendChild(oTd); var oTd = document.createElement('td'); // 姓名td oTd.innerHTML = oName.value; oTr.appendChild(oTd); var oTd = document.createElement('td'); // 年龄td oTd.innerHTML = oAge.value; oTr.appendChild(oTd); var oTd = document.createElement('td'); // oTd.innerHTML = '<a href="javascript:;">删除</a>' oTr.appendChild(oTd); oTd.getElementsByTagName('a')[0].onclick = function() { // 删除操作 oTbody.removeChild(this.parentNode.parentNode); // 删除a的父元素的父元素tr } oTbody.appendChild(oTr); } } </script> </head> <body> 姓名：<input type="text" name="name" id="name" value="Tom" /> 年龄： <input type="text" name="age" id="age" value="20" /> <input type="button" name="add" id="add" value="新增" /> <table id="tab1" width="300" border="1"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td>27</td> <!--<td><a href="javascript:;">删除</a></td>--> </tr> <tr> <td>2</td> <td>张三</td> <td>23</td> </tr> </tbody> </table> </body> </html>
三、运行效果
image
