实操一 DOM编程实例1

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             tr{
 8                 height: 70px;
 9             }
10             td{
11                 width: 150px;
12                 text-align: center;
13             }
14         </style>
15         <script type="text/javascript">
16             function addNode(){
17                 var tab = document.getElementById("tab");
18                 
19                 //创建tr节点对象
20                 var tr = document.createElement("tr");
21                 var td1 = document.createElement("td");
22                 td1.innerHTML="<input type='text' size='10px' onblur='saveVal(this)'/> ";//this代表本身的input
23                 var td2 = document.createElement("td");
24                 td2.innerHTML="<input type='text' size='10px'onblur='saveVal(this)'/>";
25                 var td3 = document.createElement("td");
26                 td3.innerHTML="<input type='button' value='添加' onclick='addNode()'/> "
27                 +"<input type='button' value='删除' onclick='removeNode(this)'/>"
28                 
29                 tab.appendChild(tr);
30                 tr.appendChild(td1);
31                 tr.appendChild(td2);
32                 tr.appendChild(td3);
33                 
34             }
35             
36             //文本框获取的值放置在父级目录td中
37             function saveVal(thi){
38                 //获得父级节点
39                 var td = thi.parentNode;
40                 
41                 td.innerHTML = thi.value;
42             }
43             
44             function removeNode(thi){
45                 var tr = thi.parentNode.parentNode;
46                 tr.remove();
47             }
48         </script>
49     </head>
50     <body>
51         <table border="1px" align="center" id="tab">
52             <tr>
53                 <th>图书名称</th>
54                 <th>图书价格</th>
55                 <th>操作</th>
56             </tr>
57             <tr>
58                 <td>JavaSE</td>
59                 <td>19</td>
60                 <td>
61                     <input type="button" name="" id="" value="添加 " onclick="addNode()" />
62                     <input type="button" name="" id="" value="删除" />
63                 </td>
64             </tr>
65             <tr>
66                 <td>JavaEE</td>
67                 <td>39</td>
68                 <td>
69                     <input type="button" name="" id="" value="添加" onclick="addNode()"/>
70                     <input type="button" name="" id="" value="删除" />
71                 </td>
72             </tr>
73         </table>
74     </body>
75 </html>
posted @ 2020-01-14 21:25  缥缈一叶舟  阅读(192)  评论(0)    收藏  举报