<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title></title>
</head>
<body>
<table?border="1"?width="50%"?id="table">
????<tr>
????????<th>學號</th>
????????<th>姓名</th>
????????<th>操作</th>
????</tr>
????<tr>
????????<td>xh001</td>
????????<td>王小明</td>
????????<td><a?href="#"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
????<tr>
????????<td>xh002</td>
????????<td>劉小芳</td>
????????<td><a?href="#"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
</table>
<input?type="button"?value="添加一行"??/>???<!--在添加按鈕上添加點擊事件??-->
<script?type="text/javascript">
????window.onload?=?function(){
????????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
????????var?tr=document.getElementsByTagName("tr");
????????for(var?i=0;i<tr.length;i++){
????????????tr[i].onmouseover=function(){
????????????????this.style.backgroundColor="#f2f2f2";
????????????}
????????????tr[i].onmouseout=function(){
????????????????this.style.backgroundColor="#fff";
????????????}
????????}
????}
????//?編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
????var?table=document.getElementById("table");
????var?input=document.getElementsByTagName("input")[0];
????input.onclick=function(){
????????var?xh=window.prompt("請輸入學號");
????????var?xm=window.prompt("請輸入姓名");
????????var?trs=?document.createElement("tr");
????????var?td1=document.createElement("td");
????????var?td2=document.createElement("td");
????????var?td3=document.createElement("td");
????????table.appendChild(trs);
????????td1.innerHTML=xh;
????????td2.innerHTML=xm;
????????td3.innerHTML="<a?href='#'>刪除</a>";
????????trs.appendChild(td1);
????????trs.appendChild(td2);
????????trs.appendChild(td3);
????}
????//?創建刪除函數
????function?del()
????{
????????var?href?=?document.getElementsByTagName("a");
????????for?(var?i?=?0;?i?<?href.length;?i++)?{
????????????href[i].onclick?=?function?()?{
????????????????var?grandParent?=?this.parentNode.parentNode.parentNode;
????????????????var?parent?=?this.parentNode.parentNode;
????????????????grandParent.removeChild(parent);
????????????}
????????}
????}
????window.onload=del();//var?href?=?document.getElementsByTagName("a")無法獲取新加入的列，我知道原因，不知道怎么解決
</script>
</body>
</html>
2016-01-30
var ?a = document.crateElement('a')
a.addEventListener('click', function() {
// destory
table.removeChild(trs)
}, false)