需求说明：
在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接，使用 DOM 节点的删除操作将对应的行数据删除
在文本输入框中输入姓名、年龄、班级和手机号，并选择性别
点击“插入数据”按钮，将输入框中的数据插入到表格中，表格中的数据将增加一条
点击表格中每条数据后的“删除”超链接，将删除该条数据，表格中的数据将减少一条
实现思路：
在页面中绘制表格，并添加 4 条虚拟数据，在每条数据后使用超链接，并且添加超链接的点击事件
在页面中添加文本输入框和选项菜单，并提示用户输入，添加“插入数据”按钮，并添加点击事件
在“插入数据”按钮的事件处理函数中，使用 document 对象的 getElementById、getElementsByTagName等属性获取输入框的值
使用 createElement 创建元素，使用 innerHTML 为元素设置文本，使用 appendChild 将创建的元素添加到 table 中
在“删除”超链接的事件处理函数中，获取超链接的父节点 td，继续获取父节点 tr，再获取父节点 table，然后将 table 节点中的 tr 节点删除
实现代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1" id="tb"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>班级</th> <th>电话</th> <th>操作</th> </tr> <tr> <td>张三</td> <td>男</td> <td>25</td> <td>软件1班</td> <td>138xxxx0987</td> <td><a href="#" onclick="del(this)">删除</a></td> </tr> <tr> <td>李四</td> <td>女</td> <td>24</td> <td>软件2班</td> <td>136xxxx8766</td> <td><a href="#" onclick="del(this)">删除</a></td> </tr> <tr> <td>王五</td> <td>男</td> <td>26</td> <td>计科1班</td> <td>199xxxx8867</td> <td><a href="#" onclick="del(this)">删除</a></td> </tr> <tr> <td>赵六</td> <td>女</td> <td>23</td> <td>计科2班</td> <td>188xxxx9965</td> <td><a href="#" onclick="del(this)">删除</a></td> </tr> </table> <p> <input type="text" id="name" placeholder="请输入姓名"/> <select> <option>男</option> <option>女</option> </select> <input type="text" id="age" placeholder="请输入年龄" /> <input type="text" id="cls" placeholder="请输入班级" /> <input type="text" id="mobile" placeholder="请输入手机号" /> <input type="button" value="插入数据" onClick="insert()" /> </p> <script type="text/javascript"> function insert(){ var sel=document.getElementsByTagName("select")[0]; var gender=sel.options[sel.selectedIndex].text; var age=document.getElementById("age").value; var cls=document.getElementById("cls").value; var mobile=document.getElementById("mobile").value; var name=document.getElementById("name").value; var arrays=new Array(name,gender,age,cls,mobile); var tb=document.getElementById("tb"); var cols=tb.getElementsByTagName("th"); var newtr=document.createElement("tr"); for (var i=0;i<cols.length;i++) { if(i==cols.length-1) { var td=document.createElement("td"); var a=document.createElement("a"); a.innerHTML="删除"; a.onclick=function(){ a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode); } a.setAttribute("href","#"); td.appendChild(a); newtr.appendChild(td); }else{ var td=document.createElement("td"); td.innerHTML=arrays[i]; newtr.appendChild(td); } } tb.appendChild(newtr); console.log(newtr) } function del(obj){ var tr=obj.parentNode.parentNode; if (tr!=null) { tr.parentNode.removeChild(tr); } } </script> </body> </html>
