一、Demo
<1>.要求
1.表格由专业班级学号1-10号同学的信息组成，包括：学号、姓名、性别、二级学院、班级、专业、辅导员；
2.表格的奇数行字体为黑色，底色为白色；偶数行字体为白色，底色为黑色；
3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，
并且删除后上述的颜色规律保持不变：
4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息。
<2>.功能
便于数据的统计，添加，删除
二、实现原理
JS通过 innerHTML 向HTML中添加所需信息，从而达到在input中输入的信息，
会出现在表格中
三、代码
<1>.Html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态表格</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入学号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="text" id="ejxy" placeholder="请输入二级学院">
<input type="text" id="bj" placeholder="请输入班级">
<input type="text" id="zy" placeholder="请输入专业">
<input type="text" id="fdy" placeholder="请输入辅导员">
<input type="button" value="添加" id="btnadd">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<td><b>学号</b></td>
<td><b>姓名</b></td>
<td><b>性别</b></td>
<td><b>二级学院</b></td>
<td><b>班级</b></td>
<td><b>专业</b></td>
<td><b>辅导员</b></td>
</tr>
<tr>
<td>22260201</td>
<td>张</td>
<td>女</td>
<td>计算机工程</td>
<td>222602</td>
<td>王嵌</td>
<td>czk</td>
<td><a href="javascript:void(0);"οnclick="deltr(this)">删除</a></td>
</tr>
<tr>
<td>22260202</td>
<td>李</td>
<td>男</td>
<td>计算机工程</td>
<td>222602</td>
<td>王嵌</td>
<td>czk</td>
<td><a href="javascript:void(0); " onclick="deltr(this)">删除</a></td>
</tr>
<tr>
<td>22260203</td>
<td>王</td>
<td>女</td>
<td>计算机工程</td>
<td>222602</td>
<td>王嵌</td>
<td>czk</td>
<td><a href="javascript:void(0);"οnclick="deltr(this)">删除</a></td>
</tr>
<tr>
<td>22260204</td>
<td>薛</td>
<td>女</td>
<td>计算机工程</td>
<td>222602</td>
<td>王嵌</td>
<td>czk</td>
<td><a href="javascript:void(0);"οnclick="deltr(this)">删除</a></td>
</tr>
<tr>
<td>22260205</td>
<td>薛</td>
<td>男</td>
<td>计算机工程</td>
<td>222602</td>
<td>王嵌</td>
<td>czk</td>
<td><a href="javascript:void(0);"οnclick="deltr(this)">删除</a></td>
</tr>
<tr>
<td>22260206</td>
<td>薛</td>
<td>女</td>
<td>计算机工程</td>
<td>222602</td>
<td>王嵌</td>
<td>czk</td>
<td><a href="javascript:void(0);"οnclick="deltr(this)">删除</a></td>
</tr>
</table>
<script src="./index.js"></script>
</body>
</html>
<2>.Css部分
table{
border: 1px solid rgb(45, 43, 201);
margin:auto;
width: 500px;
}
td,tr{
text-align: center;
border:1px solid;
}
div{
color: skyblue;
text-align: center;
margin: 50px;
}
td:last-child{
background-color: #fff;
color: #000;
}
tr:nth-child(2n-1){
background-color: #000;
color: #fff;
}
tr:first-child{
background-color: #fff;
color: #000;
}
<3>.Js部分
var btnadd=document.getElementById("btnadd");
btnadd.onclick=function(){
//获取文本提取内容
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;
var gender=document.getElementById("gender").value;
var ejxy =document.getElementById("ejxy").value;
var bj = document.getElementById("bj").value;
var zy=document.getElementById("zy").value;
var fdy=document.getElementById("fdy").value;
//获取table
var table=document.getElementsByTagName("table")[0];
//追加一行
table.innerHTML+="<tr>\n"+
"<td>"+id+"</td>"+
"<td>"+name+"</td>"+
"<td>"+gender+"</td>"+
"<td>"+ejxy+"</td>"+
"<td>"+bj+"</td>"+
"<td>"+zy+"</td>"+
"<td>"+fdy+"</td>"+
"<td><a href='javascript:void(0);'οnclick='deltr(this)'>删除</a></td>"+
"</tr>"
}
//删除
function deltr(obj){
var table=obj.parentNode.parentNode.parentNode;
var tr=obj.parentNode.parentNode;
table.removeChild(tr);
}
四、效果展示
动态表格
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
