点滴积累【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" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 52         <input type="button" id="btn" value="添加信息" />
 53     </div>
 54     <table id="tab1" border="1" style="text-align: center;  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>