<!DOCTYPE?html>
<html>
<head>
<title>?new?document?</title>
<meta?charset="utf-8"?/>
<script?type="text/javascript">
var?num?=?3
var?tr?=?document.getElementsByTagName("tr");
window.onload?=?function()?{
//?鼠標(biāo)移動(dòng)改變背景,可以通過(guò)給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來(lái)改變所在行背景色。
for(var?i?=?1;?i?<?tr.length;?i++)?{
tr[i].onmouseover?=?function()?{
this.style.backgroundColor?=?"#f2f2f2"
}
tr[i].onmouseout?=?function()?{
this.style.backgroundColor?=?"#fff"
}
}
}
//?編寫(xiě)一個(gè)函數(shù)，供添加按鈕調(diào)用，動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn)；
function?add()?{
var?tb?=?document.getElementById("table");
var?newtr?=?document.createElement("tr");
var?newtd1?=?document.createElement("td");
var?newtd2?=?document.createElement("td");
var?del?=?document.createElement("td");
newtd1.innerHTML?=?"xh00"?+?num;
var?p?=?prompt("請(qǐng)輸入你的姓名");
if(p?!=?null?&&?p?!=?"")?{
tb.appendChild(newtr);
newtr.appendChild(newtd1);
newtr.appendChild(newtd2);
newtd2.innerHTML?=?p;
del.innerHTML?=?"<a?href='javascript:;'?onclick='del(this)'?>刪除</a>";
newtr.appendChild(del);
}?else?{
alert("請(qǐng)輸入名字")
}
num++;
}
//?創(chuàng)建刪除函數(shù)
function?del(obj)?{
var?a?=?obj.parentNode.parentNode;
var?t?=?a.parentNode;
t.removeChild(a);
}
</script>
<style?type="text/css">
#table?{
background-color:?#fff;
}
</style>
</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="javascript:;"?onclick="del(this)">刪除</a>
</td>
<!--在刪除按鈕上添加點(diǎn)擊事件??-->
</tr>
<tr>
<td>xh002</td>
<td>劉小芳</td>
<td>
<a?href="javascript:;"?onclick="del(this)">刪除</a>
</td>
<!--在刪除按鈕上添加點(diǎn)擊事件??-->
</tr>
</table>
<input?type="button"?value="添加一行"?onclick="add()"?/>
<!--在添加按鈕上添加點(diǎn)擊事件??-->
</body>
</html>
//添加后的tr沒(méi)有觸發(fā)事件變色
2017-07-25
你可以在后面加個(gè)onload();讓他在運(yùn)行一遍
2017-07-25
新增的tr并沒(méi)有綁定事件，可以通過(guò)事件代理來(lái)綁定達(dá)到新增的tr也可以綁定事件的效果，建議在tr的父級(jí)元素上綁定。
?????window.onload?=?function(){ ?????//事件代理 ????????var?tbody?=?document.getElementById('table').getElementsByTagName('tbody')[0]; ????????tbody.addEventListener('mouseover',function(e){ ??????????if?(e.target?&&?e.target.nodeName.toUpperCase()?==?'TD')?{ ????????????e.target.parentNode.style.backgroundColor='#f2f2f2'; ??????????}; ????????}); ?????? ????????tbody.addEventListener('mouseout',function(e){ ??????????if?(e.target?&&?e.target.nodeName.toUpperCase()?==?'TD')?{ ????????????e.target.parentNode.style.backgroundColor='#fff'; ??????????}; ????????}); ????????}