学生个人网页制作html_学生管理html页面

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

之前学习的时候做了一个简单的crud，下面是效果图

html内容如下

<div class="conter">
<div>
<button id="btnAdd">添加</button>
<button id="delAll" onclick="delAll()"> 全部删除</button>
</div>
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbStudent">
</tbody>
</table>
<div id="divAddStudent" class="hidden">
<h2>学生信息</h2>
<form action="#" id="addStudentForm">
<p>学号：<input type="text" name="stuNo" id="stuNo"> </p>
<p>姓名：<input type="text" name="tuName" id="stuName"> </p>
<p>年龄：<input type="text" name="stuAge" id="stuAge"> </p>
<p>班级：<input type="text" name="stuClass" id="stuClass"> </p>
<p>    <button id="btnAddData" type="button">添加</button>  <button id="btnCancel">取消</button></p>
</form>
</div>
</div>
<div id="zhezhao" class="hidden"></div>

css内容

		*{ 

margin: 0;
padding: 0;
}
table{ 

width: 100%;
}
table th ,table td{ 

height: 30px;
line-height: 30px;
}
table tbody tr:nth-child(2n){ 

background-color: gainsboro;
}
table td{ 

text-align: center;
}
.conter{ 

width: 960px;
margin: 30px auto;
}
button{ 

padding: 5px 10px;
margin: 5px;
background-color: #00A398;
color: white;
border: none;
border-radius: 15%;
cursor: pointer;
}
#divAddStudent{ 

position: absolute;
z-index: 1;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 500px;
height: 300px;
margin: auto;
background-color: white;
box-sizing: border-box;
padding: 20px 50px;
}
#divAddStudent h2{ 

margin-bottom: 30px;
}
#divAddStudent p{ 

margin-top: 10px;
}
#zhezhao{ 

position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.hidden{ 

display: none;
}
.show{ 

display: block;
}
tbody:empty:before{ 

content:"当前没有学生，快去添加吧"
}

js内容

// 学生数据 stuNo：编号（唯一）stuName：姓名，stuAge：年龄，stuClass：班级名称
var studentArr=[  
{ 
"stuNo":"001","stuName":"红","stuAge":16,"stuClass":"218"},
{ 
"stuNo":"002","stuName":"小米","stuAge":15,"stuClass":"219"},
{ 
"stuNo":"003","stuName":"小明","stuAge":15,"stuClass":"218"},
{ 
"stuNo":"004","stuName":"小蓝","stuAge":16,"stuClass":"218"},
{ 
"stuNo":"005","stuName":"小紫","stuAge":15,"stuClass":"219"},
{ 
"stuNo":"006","stuName":"小青","stuAge":15,"stuClass":"218"},
{ 
"stuNo":"007","stuName":"小白","stuAge":16,"stuClass":"218"},
{ 
"stuNo":"008","stuName":"小黄","stuAge":15,"stuClass":"219"},
{ 
"stuNo":"009","stuName":"小黑","stuAge":15,"stuClass":"218"}
];
var stuNoOper="";
dataStudent();
$("btnAdd").onclick=AddStudent;
$("zhezhao").onclick=function () { 

model("divAddStudent","hidden");
};
$("btnCancel").onclick=function () { 

model("divAddStudent","hidden");
};
$("btnAddData").onclick=addStudentData;
//添加学生
function addStudentData() { 

var stuNo =$("stuNo").value;
var stuName =$("stuName").value;
var stuAge =$("stuAge").value;
var stuClass =$("stuClass").value;
if(stuNo==""){ 

alert("学号不能为空");
return;
}else if (stuName==""){ 

alert("姓名不能为空");
return;
}else if (stuAge==""){ 

alert("年龄不能为空");
return;
}else if (stuClass==""){ 

alert("班级不能为空");
return;
}
if (stuNoOper==""){ 

if (checkStudentNo(stuNo)){ 

alert("当前学号已经存在");
return;
}
var  obj= { 
"stuNo":stuNo,"stuName":stuName,"stuAge":stuAge,"stuClass":stuClass};
studentArr.push(obj);
if (confirm("添加成功，是否继续添加")){ 

$("stuNo").value="";
$("stuName").value="";
$("stuAge").value="";
$("stuClass").value="";
dataStudent();
}  else { 

model("divAddStudent","hidden");
dataStudent();
}
}
else { 

for(var i=0;i<studentArr.length;i++){ 

if (studentArr[i].stuNo==stuNoOper){ 

studentArr[i].stuName=stuName;
studentArr[i].stuAge=stuAge;
studentArr[i].stuClass=stuClass;
alert("修改成功");
model("divAddStudent","hidden");
dataStudent();
break;
}
}
}
}
//模态框方法
function model(id,type) { 

type=type || "show";
$("zhezhao").className=type;
$(id).className=type;
}
//修改学生
function  update(stuno) { 

console.log(123)
var stuObj=getStudentBystuNO(stuno);
if(stuObj){ 

stuNoOper=stuno;
model("divAddStudent");
$("stuNo").value=stuObj.stuNo;
$("stuName").value=stuObj.stuName;
$("stuAge").value=stuObj.stuAge;
$("stuClass").value=stuObj.stuClass;
}else { 

alert("输入有误")
}
}
//获取修改学生信息
function getStudentBystuNO(stuno) { 

for(var i=0;i<studentArr.length;i++){ 

if(studentArr[i].stuNo==stuno){ 

return studentArr[i];
}
}
return null;
}
//添加，接收用户数据
function AddStudent() { 

stuNoOper="";
model("divAddStudent");
}
//数据显示
function dataStudent() { 

var tbstudent=$("tbStudent");
tbstudent.innerHTML="";
for(var i=0; i<studentArr.length;i++){ 

tbstudent.innerHTML+=`<tr><td>${ 
studentArr[i].stuNo}</td><td>${ 
studentArr[i].stuName}</td><td>${ 
studentArr[i].stuAge}</td><td>${ 
studentArr[i].stuClass}</td> <td><button onclick = 'del(${ 
studentArr[i].stuNo})'>删除</button><button onclick = 'update(${ 
studentArr[i].stuNo})'>修改</button></td></tr>`
}
}
//删除
function del(stuno) { 

if (confirm("确定要删除吗")){ 

for (var i=0;i<studentArr.length;i++){ 

if(studentArr[i].stuNo==stuno){ 

studentArr.splice(i,1);
alert("删除成功");
dataStudent();
break;
}
}
}
}
//删除全部
function delAll() { 

if (confirm("确定要删除吗")){ 

studentArr=[];
dataStudent();
}
}
//验证学号
function checkStudentNo(stuNo) { 

for( var i=0;i<studentArr.length;i++){ 

if(studentArr[i].stuNo==stuNo){ 

return true;
}
}
return false;
}
//选择id
function $(id) { 

return document.getElementById(id);
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"> *{ 
 margin: 0; padding: 0; } table{ 
 width: 100%; } table th ,table td{ 
 height: 30px; line-height: 30px; } table tbody tr:nth-child(2n){ 
 background-color: gainsboro; } table td{ 
 text-align: center; } .conter{ 
 width: 960px; margin: 30px auto; } button{ 
 padding: 5px 10px; margin: 5px; background-color: #00A398; color: white; border: none; border-radius: 15%; cursor: pointer; } #divAddStudent{ 
 position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; left: 0; width: 500px; height: 300px; margin: auto; background-color: white; box-sizing: border-box; padding: 20px 50px; } #divAddStudent h2{ 
 margin-bottom: 30px; } #divAddStudent p{ 
 margin-top: 10px; } #zhezhao{ 
 position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); } .hidden{ 
 display: none; } .show{ 
 display: block; } tbody:empty:before{ 
 content:"当前没有学生，快去添加吧" } </style>
</head>
<body>
<div class="conter">
<div>
<button id="btnAdd">添加</button>
<button id="delAll" onclick="delAll()"> 全部删除</button>
</div>
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbStudent">
</tbody>
</table>
<div id="divAddStudent" class="hidden">
<h2>学生信息</h2>
<form action="#" id="addStudentForm">
<p>学号：<input type="text" name="stuNo" id="stuNo"> </p>
<p>姓名：<input type="text" name="tuName" id="stuName"> </p>
<p>年龄：<input type="text" name="stuAge" id="stuAge"> </p>
<p>班级：<input type="text" name="stuClass" id="stuClass"> </p>
<p>    <button id="btnAddData" type="button">添加</button>  <button id="btnCancel">取消</button></p>
</form>
</div>
</div>
<div id="zhezhao" class="hidden"></div>
<script type="text/javascript"> var studentArr=[ //数组 { 
"stuNo":"001","stuName":"小红","stuAge":16,"stuClass":"218"}, { 
"stuNo":"002","stuName":"小米","stuAge":15,"stuClass":"219"}, { 
"stuNo":"003","stuName":"小明","stuAge":15,"stuClass":"218"}, { 
"stuNo":"004","stuName":"小蓝","stuAge":16,"stuClass":"218"}, { 
"stuNo":"005","stuName":"小紫","stuAge":15,"stuClass":"219"}, { 
"stuNo":"006","stuName":"小青","stuAge":15,"stuClass":"218"}, { 
"stuNo":"007","stuName":"小白","stuAge":16,"stuClass":"218"}, { 
"stuNo":"008","stuName":"小黄","stuAge":15,"stuClass":"219"}, { 
"stuNo":"009","stuName":"小黑","stuAge":15,"stuClass":"218"} ]; var stuNoOper=""; dataStudent(); $("btnAdd").onclick=AddStudent; $("zhezhao").onclick=function () { 
 model("divAddStudent","hidden"); }; $("btnCancel").onclick=function () { 
 model("divAddStudent","hidden"); }; $("btnAddData").onclick=addStudentData; //添加学生 function addStudentData() { 
 var stuNo =$("stuNo").value; var stuName =$("stuName").value; var stuAge =$("stuAge").value; var stuClass =$("stuClass").value; if(stuNo==""){ 
 alert("学号不能为空"); return; }else if (stuName==""){ 
 alert("姓名不能为空"); return; }else if (stuAge==""){ 
 alert("年龄不能为空"); return; }else if (stuClass==""){ 
 alert("班级不能为空"); return; } if (stuNoOper==""){ 
 if (checkStudentNo(stuNo)){ 
 alert("当前学号已经存在"); return; } var obj= { 
"stuNo":stuNo,"stuName":stuName,"stuAge":stuAge,"stuClass":stuClass}; studentArr.push(obj); if (confirm("添加成功，是否继续添加")){ 
 $("stuNo").value=""; $("stuName").value=""; $("stuAge").value=""; $("stuClass").value=""; dataStudent(); } else { 
 model("divAddStudent","hidden"); dataStudent(); } } else { 
 for(var i=0;i<studentArr.length;i++){ 
 if (studentArr[i].stuNo==stuNoOper){ 
 studentArr[i].stuName=stuName; studentArr[i].stuAge=stuAge; studentArr[i].stuClass=stuClass; alert("修改成功"); model("divAddStudent","hidden"); dataStudent(); break; } } } } //模态框方法 function model(id,type) { 
 type=type || "show"; $("zhezhao").className=type; $(id).className=type; } //修改学生 function update(stuno) { 
 console.log(123) var stuObj=getStudentBystuNO(stuno); if(stuObj){ 
 stuNoOper=stuno; model("divAddStudent"); $("stuNo").value=stuObj.stuNo; $("stuName").value=stuObj.stuName; $("stuAge").value=stuObj.stuAge; $("stuClass").value=stuObj.stuClass; }else { 
 alert("输入有误") } } //获取修改学生信息 function getStudentBystuNO(stuno) { 
 for(var i=0;i<studentArr.length;i++){ 
 if(studentArr[i].stuNo==stuno){ 
 return studentArr[i]; } } return null; } //添加，接收用户数据 function AddStudent() { 
 stuNoOper=""; model("divAddStudent"); } //数据显示 function dataStudent() { 
 var tbstudent=$("tbStudent"); tbstudent.innerHTML=""; for(var i=0; i<studentArr.length;i++){ 
 tbstudent.innerHTML+=`<tr><td>${ 
studentArr[i].stuNo}</td><td>${ 
studentArr[i].stuName}</td><td>${ 
studentArr[i].stuAge}</td><td>${ 
studentArr[i].stuClass}</td> <td><button onclick = 'del(${ 
studentArr[i].stuNo})'>删除</button><button onclick = 'update(${ 
studentArr[i].stuNo})'>修改</button></td></tr>` } } //删除 function del(stuno) { 
 if (confirm("确定要删除吗")){ 
 for (var i=0;i<studentArr.length;i++){ 
 if(studentArr[i].stuNo==stuno){ 
 studentArr.splice(i,1); alert("删除成功"); dataStudent(); break; } } } } //删除全部 function delAll() { 
 if (confirm("确定要删除吗")){ 
 studentArr=[]; dataStudent(); } } //验证学号 function checkStudentNo(stuNo) { 
 for( var i=0;i<studentArr.length;i++){ 
 if(studentArr[i].stuNo==stuNo){ 
 return true; } } return false; } //选择id function $(id) { 
 return document.getElementById(id); } </script>
</body>
</html>