我自己想的另一个思路，可以自己定义表格内的信息，希望看到的高手看看能否帮我优化一下代码？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>学生成绩表格</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border:1px solid #ccc;
width: 400px;
text-align: center;
/* background: #333; */
margin: 20px auto 5px;
}
table tr {
height: 30px;
line-height: 30px;
}
form {
width: 130px;
height: 30px;
margin: 0 auto;
/* background: lawngreen; */
text-align: center;
}
.add,
.del {
width: 60px;
height: 24px;
line-height: 24px;
/* border-radius: 3px; */
border: 1px solid #666;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<table cellspacing="0" border="1" >
<tr>
<td>学号</td>
<td>姓名</td>
<td>成绩</td>
<td>操作</td>
</tr>
</table>
<form action="">
<input type="button" class="add" value="添加" onclick="addTr()" />
</form>
<script>
//封装删除行的函数
function delTr(a) {
var x = a.parentNode.parentNode;
// console.log(x);
x.parentNode.removeChild(x);
}
// 封装添加行的函数
function addTr() {
// 创建新的input标签,并复制给x
var x = document.createElement("input");
x.setAttribute("type", "button");
x.setAttribute("class", "del");
x.setAttribute("value", "删除");
x.setAttribute("onclick", "delTr(this)");
// console.log(x);
// 创建新的tr标签，并赋值给z
var z = document.createElement("tr");
// 创建四个新的td标签，并添加到z中
for (var i = 0; i < 4; i++) {
switch (i) {
// 输入学号
case 0:
var j = document.createElement("td");
j.innerHTML = prompt("请输入学号");
z.appendChild(j);
break;
// 输入姓名
case 1:
var k = document.createElement("td");
k.innerHTML = prompt("请输入姓名");
z.appendChild(k);
break;
// 输入成绩
case 2:
var l = document.createElement("td");
l.innerHTML = prompt("请输入成绩");
z.appendChild(l);
break;
// 添加删除按钮
case 3:
var m = document.createElement("td");
m.appendChild(x);
z.appendChild(m);
break;
}
// console.log(z);
// 将新的行添加到表格中
var a = document.getElementsByTagName("table")[0].childNodes[1];
a.appendChild(z);
}
// 改变背景色
function changeColor(){
var trs=document.getElementsByTagName('tr');
for(var i=1;i<trs.length;i++){
trs[i].onmouseover=function(){
// console.log(this);
this.style.background="#f2f2f2";
}
trs[i].onmouseout=function(){
this.style.background="";
}
}
}
changeColor();
}
</script>
</body>
</html>
