点滴积累【JS】---JS小功能（操作Table--动态添加删除表格及数据）
效果：
代码：
1 <head runat="server"> 2 <title></title> 3 <style type="text/css"> 4 tr 5 { 6 height: 30px; 7 } 8 </style> 9 <script type="text/javascript"> 10 window.onload = function () { 11 var oName = document.getElementById('txt1'); 12 var oEasyName = document.getElementById('txt2'); 13 var oHero = document.getElementById('txt3'); 14 var oBtn = document.getElementById('btn'); 15 var oTab = document.getElementById('tab1'); 16 var num = oTab.tBodies[0].rows.length + 1; 17 oBtn.onclick = function () { 18 var oTr = document.createElement('tr'); 19 20 var oTd = document.createElement('td') 21 oTd.innerHTML = num++; 22 oTr.appendChild(oTd); 23 24 var oTd = document.createElement('td'); 25 oTd.innerHTML = oName.value; 26 oTr.appendChild(oTd); 27 28 var oTd = document.createElement('td'); 29 oTd.innerHTML = oEasyName.value; 30 oTr.appendChild(oTd); 31 32 var oTd = document.createElement('td'); 33 oTd.innerHTML = oHero.value; 34 oTr.appendChild(oTd); 35 36 var oTd = document.createElement('td'); 37 oTd.innerHTML = '<a href="#">删除</a>'; 38 oTr.appendChild(oTd); 39 oTd.getElementsByTagName('a')[0].onclick = function () { 40 oTab.tBodies[0].removeChild(this.parentNode.parentNode); 41 } 42 oTab.tBodies[0].appendChild(oTr); 43 } 44 }; 45 </script> 46 </head> 47 <body> 48 <div style="margin-left: 300px; margin-top: 30px;"> 49 种族名称：<input type="text" id="txt1" /> 50 种族简称：<input type="text" id="txt2" /> 51 英雄 ：<input type="text" id="txt3" /> 52 <input type="button" id="btn" value="添加信息" /> 53 </div> 54 <table id="tab1" border="1" style="text-align: center; width: 800px; margin-left: 300px; 55 margin-top: 10px;"> 56 <thead> 57 <tr style="background-color: #FF0000"> 58 <td> 59 序号 60 </td> 61 <td> 62 种族名称 63 </td> 64 <td> 65 种族简称 66 </td> 67 <td> 68 英雄 69 </td> 70 <td> 71 操作 72 </td> 73 </tr> 74 </thead> 75 <tbody> 76 <tr> 77 <td> 78 1 79 </td> 80 <td> 81 人类联盟 82 </td> 83 <td> 84 HUM 85 </td> 86 <td> 87 代表性英雄：AM 88 </td> 89 <td> 90 </td> 91 </tr> 92 <tr> 93 <td> 94 2 95 </td> 96 <td> 97 兽人部落 98 </td> 99 <td> 100 ORC 101 </td> 102 <td> 103 代表性英雄：BM 104 </td> 105 <td> 106 </td> 107 </tr> 108 <tr> 109 <td> 110 3 111 </td> 112 <td> 113 不死亡灵 114 </td> 115 <td> 116 UD 117 </td> 118 <td> 119 代表性英雄：DK 120 </td> 121 <td> 122 </td> 123 </tr> 124 <tr> 125 <td> 126 4 127 </td> 128 <td> 129 暗夜精灵 130 </td> 131 <td> 132 NE 133 </td> 134 <td> 135 代表性英雄：DH 136 </td> 137 <td> 138 </td> 139 </tr> 140 </tbody> 141 </table> 142 </body>
