Fork me on GitHub

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 }

 

 

 


__EOF__

本文作者：Hui Li
本文链接：https://www.cnblogs.com/leedev-blog/p/14948730.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   Hui_Li  阅读(1127)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示