内容
1.表格由专业班级学号1-10号同学的信息组成,包括:学号、姓名、性别、二级学院、班级、专业、辅导员;
2表格的奇数行字体为黑色,底色为白色;偶数行字体为白色,底色为黑色;
3.表格的每一行后有一个删除按钮,点击后会跳出提示弹窗,确认后删除该行的内容,并且删除后上述的颜色规律保持不变:
4.表格的右上方有一个添加按钮,点击后跳出一个表单弹窗,可以填加新的学生的信息。
原理
使用tbody标签加上对tr标签的添加实现添加
使用display标签实现添加表格的显示和隐藏
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#add{
display: block;
position: absolute;
top: 50px;
right: 50px;
width: 50px;
height: 40px;
font-size: 20px;
line-height: 30px;
background-color: #1F92CB;
color: rgb(236, 236, 87);
border: 0;
}
#table{
width: 1000px;
margin: 100px auto;
border: 1px solid rgb(157, 157, 157);
}
#table a{
color: rgb(255, 0, 0);
}
#table tr{
text-align: center;
}
#table tr th{
border: 1px solid rgb(157, 157, 157);
}
#table tr:nth-child(2n){
color: rgb(22, 22, 22);
background-color: rgb(236, 236, 87);
}
#table tr:nth-child(2n+1){
color: rgb(22, 22, 22);
background-color: #1F92CB;
}
#table2{
width: 400px;
height: 350px;
border: 1px solid rgb(157, 157, 157);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 100px auto;
background-color: rgb(241, 241, 241);
}
#table2 tr input{
right:0;
}
#table2 button{
margin-top: 20px;
}
#box{
display: none;
position: fixed;
top: 0;
left: 0;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgb(250, 235, 215,0.5);
}
</style>
</head>
<body>
<button id="add">添加</button>
<table id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>二级学院</th>
<th>班级</th>
<th>专业</th>
<th>辅导员</th>
<th>是否删除</th>
</tr>
<tr>
<td>202301</td>
<td>刘一</td>
<td>男</td>
<td>计算机工程学院</td>
<td>01</td>
<td>计算机科学与技术</td>
<td>刘老师</td>
<td class="td"><a href="#">删除</a></td>
</tr>
<tr>
<td>202302</td>
<td>陈二</td>
<td>男</td>
<td>计算机工程学院</td>
<td>01</td>
<td>计算机科学与技术</td>
<td>刘老师</td>
<td class="td"><a href="#">删除</a></td>
</tr>
<tr>
<td>202303</td>
<td>张三</td>
<td>男</td>
<td>计算机工程学院</td>
<td>01</td>
<td>计算机科学与技术</td>
<td>刘老师</td>
<td class="td"><a href="#">删除</a></td>
</tr>
<tr>
<td>202304</td>
<td>李四</td>
<td>男</td>
<td>计算机工程学院</td>
<td>01</td>
<td>计算机科学与技术</td>
<td>刘老师</td>
<td class="td"><a href="#">删除</a></td>
</tr>
<tr>
<td>202305</td>
<td>王五</td>
<td>男</td>
<td>计算机工程学院</td>
<td>01</td>
<td>计算机科学与技术</td>
<td>刘老师</td>
<td class="td"><a href="#">删除</a></td>
</tr>
</table>
<div id="box">
<table id="table2">
<tr>
<td>学号:<input type="text" id="id"></td>
</tr>
<tr>
<td>姓名:<input type="text" id="name"></td>
</tr>
<tr>
<td>性别:<input type="text" id="sex"></td>
</tr>
<tr>
<td>二级学院:<input type="text" id="school2"></td>
</tr>
<tr>
<td>班级:<input type="text" id="classroom"></td>
</tr>
<tr>
<td>专业:<input type="text" id="profess"></td>
</tr>
<tr>
<td>辅导员:<input type="text" id="teacher"></td>
</tr>
<tr>
<td><button id="up">提交</button></td>
<td><button id="over">退出</button></td>
</tr>
</table>
</div>
<script>
function deleta(){
var tr = this.parentNode.parentNode
var decide = confirm("是否删除?")// 显示提示
if(decide){
tr.parentNode.removeChild(tr)
}
}
window.onload=function(){
var add = document.getElementById("add")
var link = document.querySelectorAll(".td a")
var up = document.getElementById("up")
for(var i=0;i<link.length;i++){// 为每一个a标签绑定一个响应函数
link[i].onclick=deleta
}
var box = document.getElementById("box")
var over = document.getElementById("over")
up.onclick=function(){
var id = document.getElementById("id").value
var name = document.getElementById("name").value
var sex = document.getElementById("sex").value
var school2 = document.getElementById("school2").value
var classroom = document.getElementById("classroom").value
var profess = document.getElementById("profess").value
var teacher = document.getElementById("teacher").value
var tr = document.createElement("tr") //创建一个tr标签
tr.innerHTML="<td>"+id+"</td>"+
"<td>"+name+"</td>"+
"<td>"+sex+"</td>"+
"<td>"+school2+"</td>"+
"<td>"+classroom+"</td>"+
"<td>"+profess+"</td>"+
"<td>"+teacher+"</td>"+
"<td class='td'><a href='#'>删除</a></td>" //添加tr标签以及其子标签
var a = tr.getElementsByTagName("a")[0] // 获取tr标签中的a标签
a.onclick = deleta; // a标签绑定响应函数
var table = document.getElementById("table")
var tbody=table.getElementsByTagName("tbody")[0];
tbody.appendChild(tr)
}
add.onclick=function(){
box.style.display="flex"
}
over.onclick=function(){
box.style.display="none"
}
}
</script>
</body>
</html>
效果