JavaScript 中DOM動态添加，删除表格元素

實作思路

1.建立一個table,thead,tbody,tr,td表格，這裡thead,tbody能夠更好的區分表頭與表格中元素的關系。、

2.分别給定id擷取

3.通過creatElement()，以及appenChild()添加

4.通過removeChild()方式删除，關鍵是要找到相對應的父節點和子節點

<script type="text/javascript">
	window.onload=function(){
		var oTxt1=document.getElementById('name');
		var oTxt2=document.getElementById('age');
		var oBtn1=document.getElementById('btn1');
		var oTab=document.getElementById('Tab');
		var ID=oTab.tbodies[0].rows.length;  //每添加一行，ID加1，ID值不能重用！
		
		oBtn1.onclick=function(){
			var oTr=document.createElement('tr');
			var oTd=document.createElement('td');
			oTd.innerHTML=ID++;	//删除後的ID不能夠再用，
			oTr.appenChild(oTd);

			var oTd=document.createElement('td');
			oTd.innerHTML=oTxt1.value;   //将添加的姓名傳給oTD
			oTr.appenChild(oTd);

			var oTd=document.createElement('td');
			oTd.innerHTML=oTxt2.value;  //将添加的年齡傳給oTD
			oTr.appenChild(oTd);
 		
 			var oTd=document.createElement('td');
			oTd.innerHTML='<a href="javascript:;" target="_blank" rel="external nofollow" >删除</a>';
			oTab.tbodies[0].removeChild(this.parentNode.parentNode)  //删除的是body下面的a的父級td的父級tr
			
			oTr.appenChild(oTd);
			
			oTab.tbodies[0].appenChild(tr);
		}
}
</script>
           

姓名：<input id="name" type="text" />
年齡：<input id="age" type="text" />
<input id="btn1" type="button" value="添加" />
<table id="Tab">
	<thead>
		<td>ID</td>
		<td>姓名</td>
		<td>年齡</td>
		<td>操作</td>
	<tbody>
		<tr>
			<td>1</td>
			<td>a</td>
			<td>12</td>
		</tr>
		<tr>
			<td>2</td>
			<td>b</td>
			<td>13</td>
		</tr>
		<tr>
			<td>3</td>
			<td>c</td>
			<td>14</td>
		</tr>
	</tbody>
</table>