案例4_动态表格添加：
分析：
1，添加
（1）.给添加按钮绑定事件
（2）.获取文本框内容
（3）.创建td设置td的文本框的内容
（4）.创建tr
（5）.将td添加到tr中
（6）.获取table，将tr添加到table中
代码实现：
<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 id="id" type="text" placeholder="请输入编号"> <input id="name" type="text" placeholder="请输入姓名"> <input id="gender" type="text" placeholder="请输入性别"> <input id="btn_add" type="button" value="添加"> </div> <table> <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> //1获取按钮 document.getElementById("btn_add").onclick = function (){ //2获取文本框的内容 let id = document.getElementById("id").value; let name = document.getElementById("name").value; let gender = document.getElementById("gender").value; //3创建td 赋值td的标签体 //id 的 td var td_id = document.createElement("td");// 在对象中创建一个对象 let text_id = document.createTextNode(id);// 创建节点 td_id.appendChild(text_id);// 添加进去 //name 的 td var td_name = document.createElement("td");// 在对象中创建一个对象 let text_name = document.createTextNode(name);// 创建节点 td_name.appendChild(text_name);// 添加进去 //gender 的 td var td_gender = document.createElement("td");// 在对象中创建一个对象 let text_gender = document.createTextNode(gender);// 创建节点 td_gender.appendChild(text_gender);// 添加进去 </script> </body>
案例4_动态表格删除：
1，删除
（1）.确定点击的是哪一个超链接
<td><a href=”javascript:void(0);” onclick=”delTr(this);”>删除</a></td>
（2）.怎么删除
removeChild()：通过父节点删除子节点
代码实现：
<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 id="id" type="text" placeholder="请输入编号"> <input id="name" type="text" placeholder="请输入姓名"> <input id="gender" type="text" placeholder="请输入性别"> <input id="btn_add" type="button" value="添加"> </div> <table> <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> //a标签td var td_a = document.createElement("td"); let ele_a = document.createElement("a"); //设置属性 ele_a.setAttribute("href","javascript:void(0)"); ele_a.setAttribute("onclick","delTr(this)"); let text_a = document.createTextNode("删除");// 文本内容 ele_a.appendChild(text_a); td_a.appendChild(ele_a); //4创建tr let tr = document.createElement("tr"); //5.将td添加到tr中 tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); //6.获取table，将tr添加到table中 let table = document.getElementsByTagName("table")[0];// 获取标签名 table.appendChild(tr); } //删除方法 function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> </body>
原文地址：http://www.cnblogs.com/hungui/p/16926211.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
