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 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>