<!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript">
function changeBGCListener(tr) {
tr.addEventListener("mouseenter", function () {
tr.style.backgroundColor = "#f2f2f2";
});
tr.addEventListener("mouseout", function () {
tr.style.backgroundColor = "#fff";
});
}
// 修改背景色
function changeBGC(trs) {
Array.from(trs).forEach(tr => {
changeBGCListener(tr);
});
}
function deleteListener(a) {
a.addEventListener("click", function () {
var tr = a.parentElement.parentElement;
tr.parentElement.removeChild(tr);
});
}
function newCol() {
var td = document.createElement("td");
var txt = document.createTextNode("");
td.appendChild(txt);
return td;
}
window.onload = function () {
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
changeBGC(document.querySelectorAll("tr"));
addRow();
deleteRow(document.querySelectorAll("a"));
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function addRow() {
/*
<tr>
<td>No</td>
<td>Name</td>
<td><a href="javascript:;">删除</a></td>
<!--在删除按钮上添加点击事件 -->
</tr>
*/
document.querySelectorAll("input")[0].addEventListener("click", function () {
var a = document.createElement("a");
a.setAttribute("href", "javascript:;");
a.appendChild(document.createTextNode("删除"));
deleteListener(a);
var tr = document.createElement("tr");
tr.appendChild(newCol());
tr.appendChild(newCol());
var td = document.createElement("td");
td.appendChild(a);
tr.appendChild(td);
changeBGCListener(tr);
document.querySelector("table").appendChild(tr);
});
}
// 创建删除函数
function deleteRow(as) {
Array.from(as).forEach(a => {
deleteListener(a);
});
}
</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="添加一行" /> <!--在添加按钮上添加点击事件 --> </body> </html>
基本完成，不足之处大家指出
<!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 tr=document.getElementsByTagName("tr");
for(var i=0;i<tr.length;i++)
{
colorFun(tr[i]);
colorFun2(tr[i]);
}
}
function colorFun(tr)
{
tr.onmouseover=function(){this.style.backgroundColor="red";}//鼠标进入行 修改颜色
}
function colorFun2(tr)
{
tr.onmouseout=function(){this.style.backgroundColor="blue";}//鼠标离开 修改行色
}
var num=2;
function ADD()
{
num++;
//document.write(num);
var tab= document.getElementById("table");//获取表格
var tr=document.createElement("tr");//创建行
var tdN=document.createElement("td");//名字
var tdb=document.createElement("td");//学号
tdb.innerHTML="xh00"+num;//修改学号内容
tdN.innerHTML="名称"+num;//修改姓名内容
var tdd=document.createElement("td");//删除键
tdd.innerHTML="<a href='javascript:;'onclick='Delet(this)' >删除</a>";//注意双引号中的双引号为单引号
tab.appendChild(tr);//添加行到表格
tr.appendChild(tdb);//添加学号到行
tr.appendChild(tdN);//添加名字到行
tr.appendChild(tdd);//添加删除到行
var tr=document.getElementsByTagName("tr");//获取所有要变色的行
for(var i=0;i<tr.length;i++)//遍历行数组改变颜色
{
colorFun(tr[i]);
colorFun2(tr[i]);
}
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function Delet(e)
{
var par=e.parentNode.parentNode;
par.parentNode.removeChild(par);
}
// 创建删除函数
</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="Delet(this)" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="Delet(this)" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="ADD()" /> <!--在添加按钮上添加点击事件 -->
</body>
</html>