<!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(){
????????//?鼠標(biāo)移動(dòng)改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。
fresh();
?}
?function?fresh(){
var?trs=document.getElementsByTagName("tr");
for(i=0;i<trs.length;i++){
var?tds=trs[i].children;
for(j=0;j<tds.length;j++){
tds[j].onmouseover=function(){
this.style.backgroundColor="#f2f2f2";
}
tds[j].onmouseout=function(){
this.style.backgroundColor="#fff";
}
}
}
}
??????//?編寫一個(gè)函數(shù)，供添加按鈕調(diào)用，動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn)；
????? function?addTr(){
var?table=document.getElementById("table");
var?tr=document.createElement("tr");//創(chuàng)建行
var?td1=document.createElement("td");//創(chuàng)建三列
td1.innerHTML="xh005";
tr.appendChild(td1);
var?td2=document.createElement("td");
td2.innerHTML="張三";
tr.appendChild(td2);
var?td3=document.createElement("td");
tr.appendChild(td3);
var?a=document.createElement("a");
a.href="javascript:void(0);"
a.onclick=function(){delChild(this);}
a.innerHTML="刪除"
td3.appendChild(a);
table.appendChild(tr);?
fresh();
}
?
??? ?
?????//?創(chuàng)建刪除函數(shù)
?????function?delChild(obj){
var?hr=obj.parentNode.parentNode;
var?parent=hr.parentNode;
parent.removeChild(hr);
}
??</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:void(0);"?onClick="delChild(this);">刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
??</tr>
??<tr>
<td>xh002</td>
<td>劉小芳</td>
<td><a?href="javascript:void(0);"?onClick="delChild(this)">刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
??</tr>??
??</table>
??<input?type="button"?value="添加一行"?onClick="addTr()"/>???<!--在添加按鈕上添加點(diǎn)擊事件??-->
????<script?type="text/javascript">?
???
</script>
?</body>
</html>
2015-07-20
代表元素做觸發(fā)事件那個(gè)參數(shù)
2015-07-20
?onClick="delChild(this)"這里的this是什么意思？
2015-07-19
<!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(){ ????????//?鼠標(biāo)移動(dòng)改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。 fresh(); ??} ??function?fresh(){ var?trs=document.getElementsByTagName("tr"); for(i=0;i<trs.length;i++){ var?tds=trs[i].children; for(j=0;j<tds.length;j++){ tds[j].onmouseover=function(){ this.style.backgroundColor="#f2f2f2"; } tds[j].onmouseout=function(){ this.style.backgroundColor="#fff"; } } } } ??????//?編寫一個(gè)函數(shù)，供添加按鈕調(diào)用，動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn)； ????? function?addTr(){ var?table=document.getElementById("table"); var?tr=document.createElement("tr");//創(chuàng)建行 var?td1=document.createElement("td");//創(chuàng)建三列 td1.innerHTML="xh005"; tr.appendChild(td1); var?td2=document.createElement("td"); td2.innerHTML="張三"; tr.appendChild(td2); var?td3=document.createElement("td"); tr.appendChild(td3); var?a=document.createElement("a"); a.href="javascript:void(0);" a.onclick=function(){delChild(this);} a.innerHTML="刪除" td3.appendChild(a); table.appendChild(tr);? fresh(); } ? ??? ? ?????//?創(chuàng)建刪除函數(shù) ?????function?delChild(obj){ var?hr=obj.parentNode.parentNode; var?parent=hr.parentNode; parent.removeChild(hr); } ??</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:void(0);"?onClick="delChild(this);">刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??--> ???</tr> ???<tr> <td>xh002</td> <td>劉小芳</td> <td><a?href="javascript:void(0);"?onClick="delChild(this)">刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??--> ???</tr>?? ???</table> ???<input?type="button"?value="添加一行"?onClick="addTr()"/>???<!--在添加按鈕上添加點(diǎn)擊事件??--> ?????<script?type="text/javascript">? ???? ?</script> ?</body> </html>