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 }