                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

后兩個功能都有問題？顯示不出來

<!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)移動改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。

? ? ? ? var trs=document.getElementsByTagName("tr");

for(var i=0;i<trs.length;i++){

? ? ?

? ? trs[i].onmouseover=function(){this.style.backgroundColor="#f2f2f2";}

? ? ?trs[i].onmouseout = function(){this.style.backgroundColor = "#fff";}

? ? ? }

}

? ? ?

? ? ? // 編寫一個函數(shù)，供添加按鈕調(diào)用，動態(tài)在表格的最后一行添加子節(jié)點(diǎn)；

? ? ? var num=2;

? ? ?function add(){

? ? ? ? ?num++;

? ? ? ? ?var t=document.createElement("tr");

? ? ? ? ?var xh=document.createElement("td");

? ? ? ? ?var xn=document.createElement("td");

? ? ? ? ?var xd=document.createElement("td");

? ? ? ? ?xh.innerHTML="xh00"+num;

? ? ? ? ?xd.innerHTML="<a href='javascript:deletes(this);'>刪除</a>";

? ? ? ? ?var xn.innerHTML=prompt("請輸入學(xué)生姓名：");

? ? ? ? ?if(xn.innerHTML){

? ? ? ? ? ? ?var ta=document.getElementsByTagName("table").lastChild;

? ? ? ? ? ? ?ta.appendChild(t);

? ? ? ? ? ? ?t.appendChild(xh);

? ? ? ? ? ? ?t.appendChild(xn);

? ? ? ? ? ? ?t.appendChild(xd);

? ? ? ? ? ??

? ? ? ? ?}

? ? ? ? ?else alert("姓名不能為空！");

? ? ?}

? ?

? ? ?

? ? ?// 創(chuàng)建刪除函數(shù)

? ? ?function deletes(obj){

? ? ? ? ?var tr=obj.parentNode.parentNode;

? ? ? ? ?tr.parentNode.removeChild(tr);

? ? ?}

? ? ?

? </script>?

?</head>?

?<body>?

? <table border="1" width="50%" id="table">

? <tr>

? </tr> ?

? <tr>

? </tr>

? <tr>

? </tr> ?

? </table>

? <input type="button" value="添加一行" onclick="add()" /> ?

?</body>

</html>

我想改個好聽點(diǎn)的名字

2015-11-23

源自：JavaScript進(jìn)階篇 9-22

關(guān)注問題我要回答

378

操作

收起

1 回答

大黃老鼠
2015-12-24

<!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)移動改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。
????????var?trs=document.getElementsByTagName("tr");
for(var?i=0;i<trs.length;i++){
?????
????trs[i].onmouseover=function(){this.style.backgroundColor="#f2f2f2";}
?????trs[i].onmouseout?=?function(){this.style.backgroundColor?=?"#fff";}
??????}
}
?????
??????//?編寫一個函數(shù)，供添加按鈕調(diào)用，動態(tài)在表格的最后一行添加子節(jié)點(diǎn)；
??????var?num=2;
?????function?add(){
?????????num++;
?????????var?t=document.createElement("tr");
?????????var?xh=document.createElement("td");
?????????var?xn=document.createElement("td");
?????????var?xd=document.createElement("td");
?????????xh.innerHTML="xh00"+num;
?????????xd.innerHTML='<a?href="javascript:;"?onclick="del(this)">刪除</a>';
?????????var?tt=prompt("請輸入學(xué)生姓名：");
		?xn.innerHTML=tt;
?????????if(xn.innerHTML){
?????????????var?ta=document.getElementById("table").lastChild;
?????????????t.appendChild(xh);
?????????????t.appendChild(xn);
?????????????t.appendChild(xd);
?????????????ta.appendChild(t);
????????????
?????????}
?????????else?alert("姓名不能為空！");
?????}
???
???	?
?????//?創(chuàng)建刪除函數(shù)
?????function?del(obj){
		?var?tbody=document.getElementById("table").lastChild;
?????????var?tr=obj.parentNode.parentNode;
????????tbody.removeChild(tr);
?????}
?????


??</script>?
?</head>?
?<body>?
??<table?border="1"?width="50%"?id="table">
??<tr>
<th>學(xué)號</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>