参考大佬们的答案自己改的通俗易懂-慕课网

首页课程实战体系课手记专栏慕课教程

参考大佬们的答案自己改的通俗易懂

来源：9-22 编程练习

qq_慕斯6581020

2019-11-23 18:49

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

// window.onload = function(){

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

function change(obj){

console.log(obj)

obj.style.backgroundColor = "red";

}

function changeback(obj){

obj.style.backgroundColor = "#fff";

}

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

var num = 2;

function addfun(){

num++;

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

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

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

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

td1.innerHTML = "xh00"+ num;

td2.innerHTML = prompt("请输入姓名","张三");

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

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

otest.appendChild(btr);

btr.appendChild(td1);

btr.appendChild(td2);

btr.appendChild(td3);

btr.setAttribute("onmouseover","change(this)");

btr.setAttribute("onmouseout","changeback(this)");

}

function del(obj){

var d = obj.parentNode.parentNode;//获得tr节点

d.parentNode.removeChild(d);//删除tr

}

</script>

</head>

<body>

<tr>

</tr>

</tr>

</tr>

</table>

</body>

</html>

写回答关注

1回答

river9015

2019-11-25 14:47:57

你有句代码有问题：otest.appendChild(btr); 你估计忘了tr的父节点是tbody，而不是table，你这样执行后，新增的tr标签全跑到tbody外面来了
应该这样写：otest.lastChild.appendChild(btr);

0 0