<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title></title>
</head>
<body>
<table?border="1"?width="50%"?id="table">
????<tr>
????????<th>學(xué)號(hào)</th>
????????<th>姓名</th>
????????<th>操作</th>
????</tr>
????<tr>
????????<td>xh001</td>
????????<td>王小明</td>
????????<td><a?href="#"?>刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
????</tr>
????<tr>
????????<td>xh002</td>
????????<td>劉小芳</td>
????????<td><a?href="#"?>刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
????</tr>
</table>
<input?type="button"?value="添加一行"??/>???<!--在添加按鈕上添加點(diǎn)擊事件??-->
<script?type="text/javascript">
????window.onload?=?function(){
????????//?鼠標(biāo)移動(dòng)改變背景,可以通過(guò)給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來(lái)改變所在行背景色。
????????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";
????????????}
????????}
????}
????//?編寫一個(gè)函數(shù),供添加按鈕調(diào)用,動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn);
????var?table=document.getElementById("table");
????var?input=document.getElementsByTagName("input")[0];
????input.onclick=function(){
????????var?xh=window.prompt("請(qǐng)輸入學(xué)號(hào)");
????????var?xm=window.prompt("請(qǐng)輸入姓名");
????????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);
????}
????//?創(chuàng)建刪除函數(shù)
????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")無(wú)法獲取新加入的列,我知道原因,不知道怎么解決
</script>
</body>
</html>
2016-01-30
var ?a = document.crateElement('a')
a.addEventListener('click', function() {
// destory
table.removeChild(trs)
}, false)