js学习表格添加与删除数据实现

时间:2021-07-28
本文章向大家介绍js学习表格添加与删除数据实现,主要包括js学习表格添加与删除数据实现使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

写出表格,然后实现对表格的增删

样式如下,请看图片

 其中添加和删除功能使用js实现

具体实现如下

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <title>Document</title>
  8     <style>
  9         #main_hear{text-align: center;margin-top: 50px;margin-bottom: 20px;}
 10         table{
 11             margin: 0 auto;
 12             border: 1px solid;
 13             width: 500px;
 14         }
 15         td,th{
 16             text-align: center;
 17             border: 1px solid;
 18         }
 19         table tr td a{
 20             width: 100%;
 21             height: 100%;
 22         }
 23     </style>
 24     <script>
 25         function delTr(obj){
 26             var tabb = obj.parentNode.parentNode.parentNode
 27             var trr = obj.parentNode.parentNode;
 28             tabb.removeChild(trr);
 29         }
 30     </script>
 31 </head>
 32 <body>
 33     <div id="main_hear">
 34         <input id="id" type="text" placeholder="编号">
 35         <input id="name" type="text" placeholder="姓名">
 36         <input id="gender" type="text" placeholder="性别">
 37         <input id="btn_add" type="button" value="添加">
 38     </div>
 39     <table id="tablee">
 40         <caption>学生信息表</caption>
 41         <tr>
 42             <th>编号</th>
 43             <th>姓名</th>
 44             <th>性别</th>
 45             <th>操作</th>
 46         </tr>
 47         <tr>
 48             <td>1</td>
 49             <td>王五</td>
 50             <td></td>
 51             <td><a href="#" onclick="delTr(this)">删除</a></td>
 52         </tr>
 53         <tr>
 54             <td>1</td>
 55             <td>王五</td>
 56             <td></td>
 57             <td><a href="#" onclick="delTr(this)">删除</a></td>
 58         </tr>
 59         <tr>
 60             <td>1</td>
 61             <td>王五</td>
 62             <td></td>
 63             <td><a href="#" onclick="delTr(this)">删除</a></td>
 64         </tr>
 65        
 66     </table>
 67     <script>
 68         document.getElementById("btn_add").onclick = function (){
 69             var id = document.getElementById("id").value;
 70             var name = document.getElementById("name").value;
 71             var gander = document.getElementById("gender").value;
 72             //alert(id+name+gander);
 73             /*var tt = document.createElement("tr");  //创建节点
 74             var tt_1 = document.createElement("td");
 75             var tt_2 = document.createElement("td");
 76             var tt_3 = document.createElement("td");
 77             var tt_4 = document.createElement("td");
 78             var tt_4a = document.createElement("a");
 79             
 80             tt_1.innerHTML=id;//设置内容
 81             tt.appendChild(tt_1);//添加节点
 82             tt_2.innerHTML=name;
 83             tt.appendChild(tt_2);
 84             tt_3.innerHTML=gander;
 85             tt.appendChild(tt_3);
 86             tt_4a.setAttribute("href","#");//设置节点属性
 87             tt_4a.setAttribute("onclick","delTr(this)");//设置节点属性
 88             tt_4a.innerHTML = "删除";
 89             tt_4.appendChild(tt_4a);
 90             tt.appendChild(tt_4);
 91             document.getElementById("tablee").appendChild(tt); //将节点添加到表格*/
 92             document.getElementById("tablee").innerHTML+="<tr>\n"+
 93             "<td>"+id+"</td>\n"+
 94             "<td>"+name+"</td>\n"+
 95             "<td>"+gander+"</td>\n"+
 96             "<td><a href=\"#\" onclick=\"delTr(this)\">删除</a></td>\n"+
 97         "</tr>"
 98         }
 99 
100     </script>
101 </body>
102 </html>

再然后就是其中采用了两种方式实现增加表格,一种是

tt.appendChild(tt_1);//添加节点
这样添加节点的方式,一种是使用了innerHTML实现,我注释掉的一部分是前者实现,后边未注释掉的部分为后者实现

原文地址:https://www.cnblogs.com/yyyueyou/p/15070780.html