var tbody=document.getElementsById('table').lastChild;當換成getElementsByTagName("table")是為什么無法運行呢?這兩句代碼都不是指代都是table這個元素節(jié)點嗎?
? ?window.onload=function(){
? ? ?Highlight();
?}
? ?function addOne(obj){
? ? var tbody=document.getElementById('table').lastChild;
? ? var tr=document.createElement('tr');
? ? var td=document.createElement("td");
? ? tr.appendChild(td);
? ? td=document.createElement("td");
? ? td.innerHTML="<input type='text' />";
? ? tr.appendChild(td);
? ? td=document.createElement("td");
? ? td.innerHTML="<a href='javascript:;' onclick='deleteRow(this)'>刪除</a>";
? ? tr.appendChild(td);
? ? tbody.appendChild(tr);
? ? Highlight();
? ?}
? ?function deleteRow(obj){
? ? var tbody=document.getElementById('table').lastChild;
? ? var tr=obj.parentNode.parentNode;
? ? tbody.removeChild(tr);
? ?}
? ?function Highlight(){
? ? var tbody=document.getElementById('table').lastChild;
? ? trs=tbody.getElementsByTagName('tr');
? ? for(var i=1;i<trs.length;i++){
? ? ? ?trs[i].onmouseover=function(){
? ? ? ? this.style.backgroundColor="#f2f2f2";
? ? ? ?}
? ? ? ?trs[i].onmouseout=function(){
? ? ? ? this.style.backgroundColor="#fff";
? ? ? ?}
? ? }
? ?}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>學號</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
? ? ?<td>xh001</td>
? ? ?<td>王小明</td>
? ? ?<td><a href="javascript:;" onclick="deleteRow(this)">刪除</a></td><!--在刪除按鈕上添加點擊事件 ?-->
</tr>
<tr>
? ? ? <td>xh002</td>
? ? ? <td>劉小芳</td>
? ? ? <td><a href="javascript:;" onclick="deleteRow(this)">刪除</a></td> ?<!--在刪除按鈕上添加點擊事件-->
</tr>
</table>
<input type="button" value="添加一行" onclick="addOne()"/> <!--在添加按鈕上添加點擊事件 -->
</body>
2017-01-04
這樣的,table下面其實和html一樣會有一些thead類似的節(jié)點,不過現(xiàn)在是可以不用去寫的,而我們需要用到的是tbody,注意了,如果你測試的時候用瀏覽器看源代碼就會發(fā)現(xiàn)瀏覽器自動會補上tbody,換句話講在table節(jié)點下還隱藏了一些不可見的東西,而tbody放在了最后,我們需要用到是tbody,所以需要用.lastChild去找到這個點(個人理解,不喜勿噴
)
2017-01-02
getElementsByTagName獲取的是一個數(shù)組,換成
getElementsByTagName("table")[0]試試