学生个人网页制作html_学生管理html页面
2023-06-13 09:13:39 时间
大家好,又见面了,我是你们的朋友全栈君。
之前学习的时候做了一个简单的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>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/194975.html原文链接:https://javaforall.cn
相关文章
- 图片下划线 html,HTML <U>下划线标签元素 HTML下划线标签「建议收藏」
- HTML实用的网页代码大全[通俗易懂]
- html直接分页的样式,HTML分页样式「建议收藏」
- 图片中加入超链接html代码,html网页超链接代码 怎样用HTML代码在图片插入超链接…
- 【说站】FC小游戏合集网页版HTML源码
- 使用HTML+CSS实现网页loading加载效果,支持定时或加载完成后隐藏
- html中如何写系统时间,在HTML页面获取当前系统时间
- html静态页面代码_静态网页设计代码
- HTML制作网页_手机制作html网页
- python网页爬虫代码_python md5加密解密
- 用Python提取网页中的超链接
- 如何将高德地图JS API嵌入到HTML网页内
- Dreamweaver 2020新版发布,更智能更高效的网页设计利器!
- 我的第五个网页制作:pre、html转义、abbr标签的使用详解编程语言
- 简单构建HTML页面,连接MySQL数据库(html连接mysql)
- 源代码Linux下获取网页源代码的简单方法(linux获取网页)
- 标签使用MySQL过滤HTML标签(mysql过滤html)
- 掌握 Linux 登录网页技巧:让浏览器上清晰显示网页内容(linux登录网页)
- 文件MySQL 使用之禅 利用HTML文件实现完美保存(mysql保存html)
- Redis快速查询提升网页体验(redis查询页面)
- php获取网页标题和内容函数(不包含html标签)
- PHP网页游戏学习之Xnova(ogame)源码解读(十二)