js动态实现表格添加和删除操作
本文实例为大家分享了js动态实现表格添加和删除的具体代码,供大家参考,具体内容如下
运行效果如图(两种实现方案,被注释的是第一种实现方案)
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> div{ text-align:center; box-sizing: border-box; width:100%; } #div1{ margin-left: 300px; width: 800px; margin-top: 50px; } #div2{ margin-left: 300px; width: 800px; padding-top:50px; } #table_id{ width: 580px; } </style> <body> <div id="div0"> <div id="div1"> <input type="text" id="userid" placeholder="请输入编号" /> <input type="text" id="username" placeholder="请输入姓名" /> <input type="text" id="gender" placeholder="请输入性别" /> <input type="button" value="添加" id="add"/> </div> <div id="div2"> <table border="1px" align="center" id="table_id"> <caption style="font: '微软雅黑';font-size:20px;">学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>令狐冲</td> <td>张无忌</td> <td><input type="button" value="删除" style="color: blue;" onclick="delTr(this)"/></td> </tr> <tr> <td>1</td> <td>令狐冲</td> <td>张无忌</td> <td><input type="button" value="删除" style="color: blue;" onclick="delTr(this)" /></td> </tr> <tr> <td>1</td> <td>令狐冲</td> <td>张无忌</td> <td><input type="button" value="删除"style="color: blue;" onclick="delTr(this)"/></td> </tr> </table> </div> </div> </body> <script type="text/javascript"> // 当点击添加按钮时触发下面的方法 document.getElementById("add").onclick=function(){ // 获取每个文本框中的内容 var id = document.getElementById("userid").value; var name = document.getElementById("username").value; var gender = document.getElementById("gender").value; /* // 添加id var td_id = document.createElement("td"); var text_id = document.createTextNode(id); td_id.appendChild(text_id); // 添加username var td_username = document.createElement("td"); var text_username = document.createTextNode(name); td_username.appendChild(text_username); // 添加gender var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender); // 添加按钮 var td_button = document.createElement("td"); var ele_input = document.createElement("input"); ele_input.setAttribute("type","button"); ele_input.setAttribute("value","删除"); ele_input.setAttribute("onclick","delTr(this)"); ele_input.style.color="blue"; td_button.appendChild(ele_input); var ele_tr = document.createElement("tr"); ele_tr.appendChild(td_id); ele_tr.appendChild(td_username); ele_tr.appendChild(td_gender); ele_tr.appendChild(td_button); var ele_table = document.getElementsByTagName("table")[0]; ele_table.appendChild(ele_tr);*/ // 使用innerHtml的方法动态添加表格 var tab = document.getElementsByTagName("table")[0]; tab.innerHTML+="<tr>\n"+ "<td>"+id+"</td>\n"+ "<td>"+name+"</td>"+ "<td>"+gender+"</td>"+ "<td><input type='button' value='删除' onclick='delTr(this)' style='color:blue'/></td>"+ "</tr>" } function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)