1.表格由专业班级学号1-10号同学的信息组成，包括：学号、姓 名、性别、二级学院、班级、专业、辅导员；
2.表格的奇数行字体为黑色，底色为白色；偶数行字体为白色，底 色为黑色；
3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，并且删除后上述的颜色规律保持不变：
4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息。
解：1.设置数组；2.获取元素；
3.（1）创建表格行；（2）渲染<td>；（3）把行添加到tbody里
4.获取删除按钮
5.给a绑定点击事件（1）设置弹窗；（2）删除当前按钮对应的行
6.给button绑定点击事件（1）阻止默认新闻；（2）生成对应数目的输入框；
（3）给新加行添加删除按钮；（4）重新给所有删除按钮绑定事件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
}
table {
/* border: 1px black solid; */
border-spacing: 0;
}
td,th {
border: 1px black solid;
width: 150px;
text-align: center;
}
a {
cursor: pointer;
text-decoration: none;
color: inherit;
}
.box tbody tr:nth-child(2n) {
color: white;
background-color: black;
}
.box tbody tr:nth-child(2n-1) {
background-color: white;
color: black;
}
button {
display: inline-block;
width: 80px;
line-height: 24px;
position: absolute;
left: 1100px;
top: 0px;
}
.box1 {
width: 100%;
height: 30px;
}
.box input{
display: inline-block;
width: 150px;
height: 20px;
border: none;
text-align: center;
font-size: 16px;
background-color: inherit;
color: inherit;
}
</style>
</head>
<body>
<form action="" id="addFrom">
<div class="box">
<div class="box1"></div>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>二级学院</th>
<th>班级</th>
<th>专业</th>
<th>辅导员</th>
<th>删除</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button>添加</button>
</div>
</form>
<script>
window.onload=function () {
// 设置数组
let content=[
{
num: 1,
name: "灰太狼",
gender: "男",
school: "计算机工程学院",
class: "3",
subject: "计算机科学与技术",
teacher: "xxx"
},
{
num: 2,
name: "红太狼",
gender: "女",
school: "计算机工程学院",
class: "1",
subject: "软件工程",
teacher: "xxx"
},
{
num: 3,
name: "喜羊羊",
gender: "男",
school: "通信工程学院",
class: "5",
subject: "通信工程",
teacher: "xxx"
},
{
num: 4,
name: "美羊羊",
gender: "女",
school: "电气工程学院",
class: "1",
subject: "计算机科学与技术",
teacher: "xxx"
},
{
num: 5,
name: "懒洋洋",
gender: "男",
school: "计算机工程学院",
class: "3",
subject: "计算机科学与技术",
teacher: "xxx"
},
{
num: 6,
name: "灰太狼",
gender: "男",
school: "计算机工程学院",
class: "3",
subject: "计算机科学与技术",
teacher: "xxx"
},
{
num: 7,
name: "红太狼",
gender: "女",
school: "计算机工程学院",
class: "1",
subject: "软件工程",
teacher: "xxx"
},
{
num: 8,
name: "喜羊羊",
gender: "男",
school: "通信工程学院",
class: "5",
subject: "通信工程",
teacher: "xxx"
},
{
num: 9,
name: "美羊羊",
gender: "女",
school: "电气工程学院",
class: "1",
subject: "计算机科学与技术",
teacher: "xxx"
},
{
num: 10,
name: "懒洋洋",
gender: "男",
school: "计算机工程学院",
class: "3",
subject: "计算机科学与技术",
teacher: "xxx"
}
]
// 获取元素
const tbody = document.querySelector('tbody')
const btn = document.querySelector('button')
for (let i = 0; i < content.length; i++) {
// 创建表格行
const tr = document.createElement('tr')
// 渲染<td>
tr.innerHTML = `
<td>${content[i].num}</td>
<td>${content[i].name}</td>
<td>${content[i].gender}</td>
<td>${content[i].school}</td>
<td>${content[i].class}</td>
<td>${content[i].subject}</td>
<td>${content[i].teacher}</td>
<td>
<a href="javascript:" data-id = ${i}>删除</a>
</td>
`
tbody.appendChild(tr) // 把行添加到tbody
}
// 获取删除按钮
const a = document.querySelectorAll('a')
for(let i = 0; i < a.length; i++) {
// 给删除按钮绑定点击事件
a[i].onclick = function() {
alert('您确定要删除吗？')
// 删除当前按钮对应的行：a的父节点是td， td的父节点是tr
tbody.removeChild(this.parentNode.parentNode)
}
}
// 给添加按钮绑定点击事件
btn.onclick = function (e) {
e.preventDefault() // 阻止默认行为（若按钮是表单按钮时有用）
const tr = document.createElement("tr")
tbody.appendChild(tr)
// 生成对应数量的输入框
for (let k in content[1]) {
const td = document.createElement("td")
td.innerHTML = `<input type="text">`
tr.appendChild(td)
}
// 给新加行添加删除按钮
const td = document.createElement("td")
td.innerHTML = `<a herf="#">删除<a>`
tr.appendChild(td)
// 重新给所有删除按钮绑定事件
const a = document.querySelectorAll("a")
for (let i = 0; i < a.length; i++) {
a[i].onclick = function () {
alert('您确定要删除吗？')
tbody.removeChild(this.parentNode.parentNode)
}
}
}
}
</script>
</body>
</html>
第一遍复写
1.删除当前按钮对应的行不会写（209行）
tbody.removeChild(this.parentNode.parentNode)
2.漏写btn点击事件里的创建行和把行添加到tbody里（215，216行）
const tr = document.createElement("tr")
tbody.appendChild(tr)
3.把渲染td写错成渲染tr（225行）
td.innerHTML = `<a herf="#">删除<a>`