正文

javascript实现表格信息增添与删除

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0715

这篇文章主要为大家详细介绍了javascript实现表格信息增添与删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

JavaScript入门

JavaScript是一种轻量级、解释型的Web开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都已经嵌入了JavaScript引擎，JavaScript源代码可以再浏览器中直接被解释执行，用户不用担心支持问题，这是一个js入门的小练习

对于表格信息的增添与删除

简单的DOM操作html标签即可实现，代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
 </style>
 <script type="text/javascript">
 
  function delA(){
     //点击超链接删除那一行
     //使用this，删除父级元素
     var tr = this.parentNode.parentNode;
 
      //获取要删除人员的名字
     var name=tr.getElementsByTagName("td")[0].innerHTML;
     //提示用户是否删除
     var flag=confirm("是否删除"+name+"？");
     
     if(flag){
      tr.parentNode.removeChild(tr);
     }
 
     //阻止浏览器默认行为，比如弹出新的标签页
     return false;
    }
 
 
  window.onload=function(){
   //点击超链接删除一个员工信息
   //获取链接
   var allA=document.getElementsByTagName("a");
 
 
   //绑定响应函数
   for(var i=0;i<allA.length;i++){
    allA[i].onclick=delA;
   }
 
 
   //添加员工功能,点击按钮将信息添加到表格中
   var addEmpButton = document.getElementById("addEmpButton");
   addEmpButton.onclick=function(){
    //获取输入框中的文本内容
    var empName=document.getElementById("empName").value;
    var email=document.getElementById("email").value;
    var salary=document.getElementById("salary").value;
    
 
    //创建一个tr
    var tr=document.createElement("tr");
    //向tr中添加内容
    tr.innerHTML="<td>"+empName+"</td>"+
        "<td>"+email+"</td>"+
        "<td>"+salary+"</td>"+
        "<td><a href='javascript:;'>Delete</a></td>";
 
     var a= tr.getElementsByTagName("a")[0];
     a.onclick=delA;
    //把tr放在table中
    var employeeTable=document.getElementById("employeeTable");
    //获取tbody
    var tbody=document.getElementsByTagName("tbody")[0];
 
 
 
    tbody.appendChild(tr);
   }
 
 
  }
 
 </script>
</head>
<body>
 <table id="employeeTable">
  <tr>
   <th>Name</th>
   <th>Email</th>
   <th>Salary</th>
   <th>&nbsp;</th>
  </tr>
  <tr>
   <td>Tom</td>
   <td>tom@tom.com</td>
   <td>5000</td>
   <td><a href="">Delete</a></td>
  </tr>
  <tr>
   <td>Jerry</td>
   <td>jerry@sohu.com</td>
   <td>8000</td>
   <td><a href="">Delete</a></td>
  </tr>
  <tr>
   <td>Bob</td>
   <td>bob@tom.com</td>
   <td>10000</td>
   <td><a href="">Delete</a></td>
  </tr>
  <div id="formDiv">
   <h4>添加新员工</h4>
   <table>
    <tr>
     <td class="word">name: </td>
     <td class="inp">
      <input type="text" name="empName" id="empName">
     </td>
    </tr>
    <tr>
     <td class="word">email: </td>
     <td class="inp">
      <input type="text" name="email" id="email">
     </td>
    </tr>
    <tr>
     <td class="word">salary: </td>
     <td class="inp">
      <input type="text" name="salary" id="salary">
     </td>
    </tr>
    <tr>
     <td colspan="2" align="center"> <!--colspan和rowspan属性是单元格可横跨的行数和列数-->
      <!--align属性是文本对齐位置-->
      <button id="addEmpButton" value="abc">
       Submit
      </button>
     </td>
    </tr>
   </table>
  </div>
 </table>
</body>
</html>

代码片段里注释非常清楚，适合拿来练练手。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持米米素材网。

原文链接：https://blog.csdn.net/qq_51649438/article/details/115415134