                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

javascript的问题，点击添加一行不好使，实在不知道自己哪里写的不对，求助

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

window.onload = function(){

// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

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

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

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

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

}

// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

function addto(){

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

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

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

tr.appendChild(td);

td=document.createElement("td");

tr.appendChild(td);

td=document.createElement("td");

tr.appendChild(td);

td.innerHTML="<a href="javascript:;" >删除</a>";

tr.appendChild(td);

table.appendChild(tr);

}

function addo(){

var table = document.getElementById('table').lastChild;

var tr = document.createElement('tr');

var td = document.createElement('td');

td.innerHTML="<input type = 'text' />";

tr.appendChild(td);

td = document.createElement('td');

td.innerHTML="<input type = 'text' />";

tr.appendChild(td);

td = document.createElement('td');

td.innerHTML='<a href="#" onclick = "deleteItem(this);return false;" >删除</a>';

tr.appendChild(td);

table.appendChild(tr);

}

// 创建删除函数

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

doits

2016-03-25

源自：JavaScript进阶篇 9-22

关注问题我要回答

340

操作

收起

2 回答

限量
2016-03-26

必须是数组啊，因为是Elements而ById的是Element。它们差了一个s。

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

先说getElementsByTagName，没错它得到的一定是个数组。而在整个网页结构中只有一个table标签。那它得到的就是一个只有一个成员的数组。当想访问这个table是必须加上下标[0]。

至于fiirstChild和lastChild顾名思义就是首子节点和尾子节点的意思。你需要访问首尾子节点时就用吧。如果不是推荐用childNodes[n]的方式访问。特别注意除了IE其它浏览器的fiirstChild一般都会访问到空白节点。

贴个代码，你参考下。

    function addrow(){
        var newtr=document.createElement("tr");
        for(var i=0;i<3;++i)
        {
            var newtd=document.createElement("td");
            newtr.appendChild(newtd);
        }
        var tb=document.getElementById("table");
        tb.childNodes[1].appendChild(newtr);
        //tb.appendChild(newtr);//这句亦可。
    }

这里强调一下，tb.childNodes[1].appendChild(newtr);才是正确的格式，因为浏览器会默认给table标签内加上tbody标签。所以tr是tbody的子标签，是tabble子标签的子标签。至于tb.appendChild(newtr);为什么也可以呢，这可能是浏览器在语句解释上的兼容吧。但是在删除行时如果用tb.removeChild()是无法删除行的。