JavaScript實現動態新增和刪除表格
阿新 • • 發佈:2021-06-29
最近複習網頁的三大元件,就記錄一下寫的一些程式碼片段
本篇介紹瞭如何使用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 }