JavaWeb10.4【JS：案例4动态表格】 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 
  7     <style>
  8         table{
  9             border: 1px solid;
 10             margin: auto;
 11             width: 500px;
 12         }
 13 
 14         td,th{
 15             text-align: center;
 16             border: 1px solid;
 17         }
 18         div{
 19             text-align: center;
 20             margin: 50px;
 21         }
 22     </style>
 23 </head>
 24 <body>
 25     <div>
 26         <input type="text" id="id" placeholder="请输入编号">
 27         <input type="text" id="name"  placeholder="请输入姓名">
 28         <input type="text" id="gender"  placeholder="请输入性别">
 29         <input type="button" value="添加" id="btn_add">
 30     </div>
 31 
 32     <table>
 33         <caption>学生信息表</caption>
 34         <tr>
 35             <th>编号</th>
 36             <th>姓名</th>
 37             <th>性别</th>
 38             <th>操作</th>
 39         </tr>
 40         <tr>
 41             <td>1</td>
 42             <td>令狐冲</td>
 43             <td>男</td>
 44             <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>  <!--this代表当前超链接这个对象-->
 45         </tr>
 46         <tr>
 47             <td>2</td>
 48             <td>任我行</td>
 49             <td>男</td>
 50             <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
 51         </tr>
 52         <tr>
 53             <td>3</td>
 54             <td>岳不群</td>
 55             <td>?</td>
 56             <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
 57         </tr>
 58     </table>
 59 
 60     <script>
 61         /*
 62         分析：
 63             1.添加：
 64                 1. 给添加按钮绑定单击事件
 65                 2. 获取文本框的内容
 66                 3. 创建td，设置td的文本为文本框的内容。
 67                 4. 创建tr
 68                 5. 将td添加到tr中
 69                 6. 获取table，将tr添加到table中
 70             2.删除：
 71                 1.确定点击的是哪一个超链接
 72                     <a href="javascript:void(0);" onclick="delTr(this);" >删除</a>
 73                 2.怎么删除？
 74                     removeChild():通过父节点删除子节点
 75         */
 76 
 77         /**
 78          * 添加功能-原始繁琐版
 79          */
 80         document.getElementById("btn_add").onclick = function () {
 81             var id = document.getElementById("id").value;
 82             var name = document.getElementById("name").value;
 83             var gender = document.getElementById("gender").value;
 84 
 85             var td_id = document.createElement("td");
 86             var text_id = document.createTextNode(id);
 87             td_id.appendChild(text_id);
 88             var td_name = document.createElement("td");
 89             var text_name = document.createTextNode(name);
 90             td_name.appendChild(text_name);
 91             var td_gender = document.createElement("td");
 92             var text_gender = document.createTextNode(gender);
 93             td_gender.appendChild(text_gender);
 94 
 95             var td_a = document.createElement("td");
 96             var ele_a = document.createElement("a");
 97             ele_a.setAttribute("href", "javascript:void(0);");
 98             ele_a.setAttribute("onclick", "delTr(this);");
 99             var text_a = document.createTextNode("删除");
100             ele_a.appendChild(text_a);
101             td_a.appendChild(ele_a);
102 
103             var tr = document.createElement("tr");
104 
105             tr.appendChild(td_id);
106             tr.appendChild(td_name);
107             tr.appendChild(td_gender);
108             tr.appendChild(td_a);
109 
110             var table = document.getElementsByTagName("table")[0];
111             table.appendChild(tr);
112         }
113 
114         /**
115          * 删除功能
116          */
117         function delTr(obj) {
118             // alert(obj); //javascript:void(0);
119             var table = obj.parentNode.parentNode.parentNode;
120             var tr = obj.parentNode.parentNode;
121             table.removeChild(tr);
122         }
123     </script>
124 </body>
125 </html>

 

posted @ 2021-06-28 11:20  yub4by  阅读(120)  评论(0)    收藏  举报