内容
1.表格由专业班级学号1-10号同学的信息组成,包括:学号、姓名、性别、二级学院、班级、专业、辅导员;
2.表格的奇数行字体为黑色,底色为白色;偶数行字体为白色,底色为黑色;
3.表格的每一行后有一个删除按钮,点击后会跳出提示弹窗,确认后删除该行的内容,并且删除后上述的颜色规律保持不变:
4.表格的右上方有一个添加按钮,点击后跳出一个表单弹窗,可以填加新的学生的信息。
实验原理
添加节点添加新的内容
点击删除按钮删除父节点
重复检查赋值行内颜色
html
<!DOCTYPE html>
<html lang="zh-CN">
<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>demo10</title>
<link rel="stylesheet" href="./css/demo10.css">
</head>
<body>
<table>
<thead>
<tr>
<th class="">学号</th>
<th>姓名</th>
<th>性别</th>
<th>二级学院</th>
<th>班级</th>
<th>专业</th>
<th>辅导员</th>
<th><button class="tj">添加</button></th>
<th>
<div class="add">
<input type="text" placeholder="学号">
<input type="text" placeholder="姓名">
<input type="text" placeholder="性别">
<input type="text" placeholder="二级学院"><br>
<input type="text" placeholder="班级">
<input type="text" placeholder="专业">
<input type="text" placeholder="辅导员">
<button class="sur">确定</button>
</div>
</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>1</td>
<td>***</td>
<td>*</td>
<td>*******</td>
<td>******</td>
<td>***********</td>
<td>***</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>***</td>
<td>*</td>
<td>*******</td>
<td>******</td>
<td>***********</td>
<td>***</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>3</td>
<td>***</td>
<td>*</td>
<td>*******</td>
<td>******</td>
<td>***********</td>
<td>***</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>4</td>
<td>***</td>
<td>*</td>
<td>*******</td>
<td>******</td>
<td>***********</td>
<td>***</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>5</td>
<td>***</td>
<td>*</td>
<td>*******</td>
<td>******</td>
<td>***********</td>
<td>***</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>6</td>
<td>***</td>
<td>*</td>
<td>*******</td>
<td>******</td>
<td>***********</td>
<td>***</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>7</td>
<td>***</td>
<td>*</td>
<td>*******</td>
<td>******</td>
<td>***********</td>
<td>***</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>8</td>
<td>***</td>
<td>*</td>
<td>*******</td>
<td>******</td>
<td>***********</td>
<td>***</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>9</td>
<td>***</td>
<td>*</td>
<td>*******</td>
<td>******</td>
<td>***********</td>
<td>***</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>10</td>
<td>***</td>
<td>*</td>
<td>*******</td>
<td>******</td>
<td>***********</td>
<td>***</td>
<td><button class="del">删除</button></td>
</tr>
</tbody>
</table>
<script src="./js/demo10.js"></script>
</body>
</html>
css
<style>
*{
margin: 0;
padding: 0;
}
td{
text-align: center;
padding-right: 20px;
padding-bottom: 10px;
}
th{
padding-right: 20px;
padding-bottom: 20px;
}
button{
width: 50px;
}
.add{
display: none;
}
</style>
js
<script>
var tb=document.getElementById("tb");
var tr=tb.getElementsByTagName("tr");
var del=document.getElementsByClassName("del");
for(var i=0;i<tr.length;i++){
tr[i].dataset.index=i+1;
var idx=tr[i].dataset.index;
if(idx%2!==0){
tr[i].style.backgroundColor="black";
tr[i].style.color="white";
}
del[i].onclick=function(){
this.parentNode.parentNode.remove();
for(var m=0;m<tr.length;m++){
tr[m].dataset.index=m+1;
tr[m].style.backgroundColor="white";
tr[m].style.color="black";
var idx2=tr[m].dataset.index;
if(idx2%2!==0){
tr[m].style.backgroundColor="black";
tr[m].style.color="white";
}
}
}
}
var tj=document.getElementsByClassName("tj")[0];
tj.onclick=function(){
var add=document.getElementsByClassName("add")[0];
add.style.display="block";
}
var sur=document.getElementsByClassName("sur")[0];
sur.onclick=function(){
var xh=document.getElementsByTagName("input");
var newtr=document.createElement("tr");
newtr.innerHTML=`<td>${xh[0].value}</td><td>${xh[1].value}</td><td>${xh[2].value}</td><td>${xh[3].value}</td><td>${xh[4].value}</td><td>${xh[5].value}</td><td>${xh[6].value}</td><td><button class='del'>删除</button></td>`;
tb.appendChild(newtr);
var add=document.getElementsByClassName("add")[0];
add.style.display="none";
for(var i=0;i<tr.length;i++){
tr[i].dataset.index=i+1;
var idx=tr[i].dataset.index;
if(idx%2!==0){
tr[i].style.backgroundColor="black";
tr[i].style.color="white";
}
del[i].onclick=function(){
this.parentNode.parentNode.remove();
for(var m=0;m<tr.length;m++){
tr[m].dataset.index=m+1;
tr[m].style.backgroundColor="white";
tr[m].style.color="black";
var idx2=tr[m].dataset.index;
if(idx2%2!==0){
tr[m].style.backgroundColor="black";
tr[m].style.color="white";
}
}
}
}
}
</script>
样式
动态表格