新增加的行不能刪除，也沒法隨著鼠標(biāo)的移動(dòng)--背景變色吧？
新增加的行不能刪除，也沒法隨著鼠標(biāo)的移動(dòng)--背景變色吧？
東東_wzd
2015-05-28
1 回答
舉報(bào)
0/150
提交
取消
2015-05-28
<!DOCTYPE?html> <html> ?<head> ??<title>?new?document?</title>?? ??<meta?http-equiv="Content-Type"?content="text/html;?charset=gbk"/>??? ??<script?type="text/javascript">? ?? ??????window.onload?=?function(){ ??????????var?tr=document.getElementsByTagName("tr"); ??????????for(var?i=?0;i<tr.length;i++) ??????????{ ??????????????bgcChange(tr[i]); ??????????} ?????//?鼠標(biāo)移動(dòng)改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。 ??????}????????? ?????function?bgcChange(obj) ?????{ ????????obj.onmouseover=function(){ ????????????obj.style.backgroundColor="#f2f2f2"; ????????} ????????obj.onmouseout=function(){ ????????????obj.style.backgroundColor="#fff"; ????????} ?} ??? ?//?編寫一個(gè)函數(shù)，供添加按鈕調(diào)用，動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn)； ?????var?num=2; ?????function?add(){ ????????num++; ????????var?tr=document.createElement("tr"); ????????var?xh=document.createElement("td"); ????????var?xm=document.createElement("td"); ????????xh.innerHTML="xh00"+num; ????????xm.innerHTML="?"; ????????var?del=document.createElement("td"); ????????del.innerHTML="<a?href='javascript:;'?onclick='del(this)'?>刪除</a>"; ????????var?tab=document.getElementById("table"); ????????tab.appendChild(tr); ????????tr.appendChild(xh); ????????tr.appendChild(xm); ????????tr.appendChild(del); ????????var?tr?=?document.getElementsByTagName("tr"); ??????????for(var?i=?0;i<tr.length;i++) ??????????{ ??????????????bgcChange(tr[i]); ??????????} ?????} ??? ? ?????//?創(chuàng)建刪除函數(shù) ?????function?del(obj) ?????{ ?????????var?tr=obj.parentNode.parentNode; ?????????tr.parentNode.removeChild(tr); ?????} ????? ? ? ??</script>? ?</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>參考答案