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

var tbody=document.getElementById("table").lastChild; tbody顯示未定義，求助

var tbody=document.getElementById("table").lastChild; ?tbody顯示未定義，求助

風(fēng)到這里就是粘

2017-07-27

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

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

1203

操作

收起

4 回答

X4tar 回答被采納 +2 積分
2017-07-28

根據(jù)瀏覽器的解釋的順序, 當(dāng)它讀到getElementById("table")的時(shí)候,還不知道有table這個(gè)東西.?

所以你把script代碼段放到table以后, getElementById.....這行隨意放函數(shù)外面還是里面

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

風(fēng)到這里就是粘提問者

非常感謝！但是我還想問一下，放在addtr()里面是為什么可以？是因?yàn)辄c(diǎn)擊按鈕時(shí)，又把函數(shù)解釋了一遍才拿到那個(gè)table嗎？

2017-07-28 回復(fù) 有任何疑惑可以回復(fù)我~

#2

X4tar 回復(fù) 風(fēng)到這里就是粘提問者

是的,點(diǎn)擊事件會(huì)回調(diào)函數(shù)addtr(), 函數(shù)中的tbody是個(gè)只屬于函數(shù)的局部變量,每次調(diào)用完函數(shù)后都會(huì)被釋放掉.也是遵守先聲明后調(diào)用的順序.如果把var tbody = ......這句放在tbody......后面就會(huì)報(bào)錯(cuò)

2017-07-28 回復(fù) 有任何疑惑可以回復(fù)我~

#3

風(fēng)到這里就是粘提問者回復(fù) X4tar

明白了，非常感謝！

2017-07-29 回復(fù) 有任何疑惑可以回復(fù)我~

風(fēng)到這里就是粘提問者
2017-07-28

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>制作一個(gè)表格，顯示班級(jí)的學(xué)生信息</title>
<script?type="text/javascript">
window.onload?=?function(){
//鼠標(biāo)移動(dòng)改變背景,鼠標(biāo)移到不同行上時(shí)背景色改為色值為?#f2f2f2，移開鼠標(biāo)時(shí)則恢復(fù)為原背景色?#fff
//提示:1.獲取表格的行，getElementsByTagName?。2.使用for進(jìn)行循環(huán)，為每行添加事件及背景顏色設(shè)置。
var?trs=document.getElementsByTagName("tr");
for?(var?i?=?0;?i?<?trs.length;?i++)?{
trs[i].onmouseover=function(){
this.style.backgroundColor="pink";
};
trs[i].onmouseout=function(){
this.style.backgroundColor="#fff";
};
}
}

//?編寫一個(gè)函數(shù)，供添加按鈕調(diào)用，動(dòng)態(tài)在表格的最后一行添加一行；
//?使用createElement()、innerHTML、appendChild()
function?addtr(){
var?stuNo=prompt("請(qǐng)輸入學(xué)號(hào)：","");
var?name=prompt("請(qǐng)輸入姓名：","");
var?newtr=document.createElement("tr");
newtr.innerHTML='<td>'+stuNo+'</td>'+'<td>'+name+'</td>'+'<td>'+'<a?href="javascript:deleteRow();"?>刪除</a>'+'</td>';?//innerHTML可以解析HTML標(biāo)簽
var?tbody=document.getElementById("table").lastChild;//瀏覽器在table標(biāo)簽下默認(rèn)添加tbody節(jié)點(diǎn)，為什么放到addtr()外面不好使？
tbody.appendChild(newtr);
}
//??使用removeChild()創(chuàng)建刪除函數(shù),刪除當(dāng)前行
function?deleteRow(){
var?tbody=document.getElementById("table").lastChild;
tbody.removeChild(this.parentNode.parentNode);
}
</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:deleteRow();"?>刪除</a></td><!--在刪除按鈕上添加點(diǎn)擊事件??-->
</tr>
<tr>
<td>xh002</td>
<td>劉小芳</td>
<td><a?href="javascript:deleteRow();"?>刪除</a></td><!--在刪除按鈕上添加點(diǎn)擊事件??-->
</tr>
</table>
<input?type="button"?value="添加一行"?onclick="addtr()"?/><!--在添加按鈕上添加點(diǎn)擊事件??-->
</body>
</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答