JavaScript实现动态添加和删除表格
最近复习网页的三大组件,就记录一下写的一些代码片段
本篇介绍了如何使用JavaScript来初步实现表格的动态添加和删除，较为简单，非常适合新手学习
话不多说：先附上运行结果
1.这里是html文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 5 <head> 6 <meta charset="UTF-8"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <title>动态删除表格</title> 10 11 12 <link rel="stylesheet" href="../css/table.css" type="text/css"> 13 <!-- 引入js --> 14 <script src="../js/table.js" charset="utf-8"></script> 15 </head> 16 17 18 <body> 19 <div id="div0"> 20 <div id="div1"> 21 <input id="studentId" placeholder="请输入学号" /> 22 <input id="studentName" placeholder="请输入姓名" /> 23 <input id="zhuanye" placeholder="请输入专业" /> 24 <input id="add" type="button" value="添加" onclick="add()" /> 25 </div> 26 27 28 <div id="div2"> 29 <table border="1 solid" id="tb" align="center"> 30 <caption style="font:'宋体';font-size:20px">个人信息</caption> 31 <tr> 32 <th>学号</th> 33 <th>姓名</th> 34 <th>专业</th> 35 <th>操作</th> 36 </tr> 37 <tr> 38 <td>1903605001</td> 39 <td>张三</td> 40 <td>计科</td> 41 <td> 42 <input type="button" value="删除" onclick="deleteRow(this)" style="color: red" /> 43 </td> 44 </tr> 45 <tr> 46 <td>1903605011</td> 47 <td>李四</td> 48 <td>计科</td> 49 <td> 50 <input type="button" value="删除" onclick="deleteRow(this)" style="color: red" /> 51 </td> 52 </tr> 53 <tr> 54 <td>1903605031</td> 55 <td>王五</td> 56 <td>计科</td> 57 <td> 58 <input type="button" value="删除" onclick="deleteRow(this)" style="color: red" /> 59 </td> 60 </tr> 61 <tr> 62 <td>1903605041</td> 63 <td>赵六</td> 64 <td>计科</td> 65 <td> 66 <input type="button" value="删除" onclick="deleteRow(this)" style="color: red" /> 67 </td> 68 </tr> 69 <tr> 70 <td>1903605051</td> 71 <td>黄七</td> 72 <td>计科</td> 73 <td> 74 <input type="button" value="删除" onclick="deleteRow(this)" style="color: red" /> 75 </td> 76 </tr> 77 <tr> 78 <td>1903605061</td> 79 <td>周八</td> 80 <td>计科</td> 81 <td> 82 <input type="button" value="删除" onclick="deleteRow(this)" style="color: red" /> 83 </td> 84 </tr> 85 </table> 86 </div> 87 </div> 88 </body> 89 </html>
2. 这里是css文件
1 /* 表格的css样式 */ 2 div { 3 text-align: center; 4 box-sizing: border-box; 5 width: 100%; 6 } 7 8 #div1 { 9 10 margin-left: 300px; 11 width: 800px; 12 margin-top: 50px; 13 } 14 15 #div2 { 16 17 margin-left: 300px; 18 width: 800px; 19 padding-top: 50px; 20 } 21 22 #tb { 23 width: 580px; 24 /* 为表格添加背景图片 */ 25 /* 这里的url图片读者请自行设置，本人是采用 26 相对路径方式引入的 27 */ 28 background-image: url(../img/1.jfif); 29 }
3. 这里是js文件 ，引入时注意文件名的名字！！！
1 // 动态删除表格的行 2 function deleteRow(node) { 3 // 第一个 parentNode获取到当前td 4 // 第二个 parentNode获取到tr 5 // 第三个 parentNode获取到当前table 6 var table = node.parentNode.parentNode.parentNode; 7 var tr = node.parentNode.parentNode; 8 9 table.removeChild(tr); 10 } 11 12 //document.getElementById("add").onclick = 13 function add() { 14 15 16 // 首先获取到每个输入框输入的值 17 let id = document.getElementById("studentId").value; 18 let stdname = document.getElementById("studentName").value; 19 let zhuanye = document.getElementById("zhuanye").value; 20 if ((id === "" || stdname === "" || zhuanye === "") || (id === "" && stdname === "" && zhuanye === "")) { 21 alert("输入框内容不能为空") 22 } else { 23 // 通过innerHtml方式 24 var tab = document.getElementsByTagName("table")[0]; // 获取表格 25 tab.innerHTML 26 += 27 "<tr>\n" + 28 "<td>" + id + "</td>\n" + 29 "<td>" + stdname + "</td>" + 30 "<td>" + zhuanye + "</td>" + 31 "<td><input type='button' value='删除' onclick='deleteRow(this)' style='color:red'/></td>" + 32 "</tr>" 33 34 } 35 }
