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

请教大神：window.onload 为什么只包含鼠标事件，不包含新增行和删除行函数？

window.onload = function() 如果包含添加行和删除行函数时，会使添加和删除函数失效，为什么？

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

window.onload = function(){

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

function changec(obj)

{ obj.style.backgroundColor ="#f2f2f2";

}

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

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

{ row[i].onmouseover=changec(row[i]);

}

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

function addrow()

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

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

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

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

td3.innerHTML="<a href='javascript:;' onclick='delrow(this);'>删除</a>";

var tab = document.getElementById("table");

tab.appendChild(newrow);

newrow.appendChild(td1);

newrow.appendChild(td2);

newrow.appendChild(td3);

}

// 创建删除函数

function delrow(obj)

{ var tr = obj.parentNode.parentNode;

tr.parentNode.removeChild(tr);

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

beiyanwanjun

2018-06-01

源自：JavaScript进阶篇 9-22

关注问题我要回答

1078

操作

收起

1 回答

慕婉清0528570
2018-06-03

在添加函数中，你是把 tr 标签添加到了 table 下，而事实一般情况 table 下还习惯性省略了 tbody 标签，你应该是把 tr 添加到 table 的子节点 tbody 下。

var tbody = document.getElemntById('table').lastChild;       // table 就两个子节点（一个空白节点、一个tbody）
var tr = document.cretaElement('tr');

var td = document.cretaEelment('td');
td.innerHTML = "<input type='text' />";
tr.appendChild(td);

...

tbody.appendChild(tr);   // 就tr 添加到 tbody 下