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>
