差不多实现了
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript">
window.onload = function () {
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
var trs = document.getElementsByTagName("tr");
for (let index = 1; index < trs.length; index++) {
trs[index].setAttribute("onmouseover", "fun1(this)");
trs[index].setAttribute("onmouseout", "fun2(this)");
trs[index].children[2].setAttribute("onclick","deleteNode(this)");
}
}
function fun1(obj) {
// console.log(obj);
obj.style.backgroundColor = "#999";
}
function fun2(obj) {
obj.style.backgroundColor = "#fff";
}
function deleteNode(obj) {
console.log(obj.parentNode.parentNode.removeChild(obj.parentNode));
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function add() {
var table = document.getElementById("table").children[0];
console.log(table);
var tr = document.createElement("tr");
var td = document.createElement("td");
tr.setAttribute("onmouseover", "fun1(this)");
tr.setAttribute("onmouseout", "fun2(this)");
table.appendChild(tr);
td.innerHTML = "1";
tr.appendChild(td);
var td = document.createElement("td");
td.innerHTML = "安安";
tr.appendChild(td);
var td = document.createElement("td");
td.setAttribute("onclick","deleteNode(this)");
td.innerHTML = "<a href='javascript:;'>删除</a>";
tr.appendChild(td);
}
</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:;">删除</a></td>
<!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;">删除</a></td>
<!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="add()"/>
<!--在添加按钮上添加点击事件 -->
</body>
</html>
