动态表格的添加和删除 男娘i 2022-05-12 07:28 188阅读 0赞 # 动态表格的添加和删除(优化简单写法) # <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table{ border: 1px solid; margin: auto; width: 500px; } td,th{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } </style> </head> <body> <div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" value="添加" onclick="addtr()"> </div> <table id="tab"> <caption>学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>葫芦娃</td> <td>男</td> <td><a href="javascript:void (0)" onclick="deltr(this)">删除</a></td> </tr> <tr> <td>2</td> <td>爷爷</td> <td>男</td> <td><a href="javascript:void (0)" onclick="deltr(this)">删除</a></td> </tr> <tr> <td>3</td> <td>妖精</td> <td>?</td> <td><a href="javascript:void (0);" onclick="deltr(this)">删除</a></td> </tr> </table> <script> ### //添加一行的方法 ### function addtr() { var tab = document.getElementById("tab"); var vid = document.getElementById("id").value; var vname = document.getElementById("name").value; var vgender = document.getElementById("gender").value; //获取table //var tab = document.getElementsByTagName("table")[0]; tab.innerHTML +="<tr>\n" + " <td>"+vid+"</td>\n" + " <td>"+vname+"</td>\n" + " <td>"+vgender+"</td>\n" + " <td><a href=\"javascript:void (0)\" onclick='deltr(this)'>删除</a></td>\n" + " </tr>" } ### //删除一行的方法 ### function deltr(obj) { //第一个爹是td,爷爷是tr,太爷是table var tab = obj.parentNode.parentNode.parentNode; //删除 tab.removeChild(obj.parentNode.parentNode); } </script> </body> </html>
还没有评论,来说两句吧...