利用html加css以及JavaScript写一个学生后台管理系统简单平台

之前学习的时候做了一个简单的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;}//选择idfunction $(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;}//选择idfunction $(id) {return document.getElementById(id);}</script>
</body>
</html>

利用html加css以及JavaScript写一个学生后台管理系统简单平台相关推荐

用css html JavaScript 写一个圣诞表白程序，要求功能多样，复杂，花哨，女孩子没有抵抗力...
好的,我来为您编写一个圣诞表白的程序. 首先,我们可以使用 HTML 来创建网页的结构.我们可以使用一个 div 元素来包含整个程序,并使用几个 p 元素来显示文本. 然后,我们可以使用 CSS 来美 ...
用PHP写一个学生学籍管理系统
为了搭建一个完整的学生学籍管理系统,需要分模块进行设计和实现.这里我们按照以下模块来讲解: 数据库设计用户登录和权限控制学生信息管理班级信息管理课程信息管理成绩信息管理 1. 数据库设计我 ...
用 python写一个学生信息管理系统
好的,首先需要设计学生信息管理系统的数据结构. 假设我们需要记录每个学生的姓名.学号.年龄.性别以及成绩,我们可以使用 Python 的字典来表示一个学生的信息,字典的键表示信息的名称,值表示信息的内 ...
JavaScript写一个虚拟软键盘，可拼音输入
在某些业务场景中,无法使用外接实体键盘,也不方便调出windows自带的虚拟键盘,这时候我们可以利用JavaScript写一个虚拟键盘,实现点击输入框即可唤醒,大小写中.英文及数字的输入.可满足实际使 ...
php开发俄罗斯方块,用JavaScript写一个俄罗斯方块
曾经用 Turbo C++ 3.0 写过 DOS 下的俄罗斯方块,不久之后又用 VB 写了另一个版本.这次决定用 JavaScript 再写一个并非完全心血来潮,从技术上来说,主要是想尝试使用 web ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
用JavaScript写一个正则表达式测试工具
用JavaScript写一个正则表达式测试工具 <!DOCTYPE html> <html><head><meta charset="utf-8&q ...
[css] 使用css的attr()写一个类似a标签title的提示框
[css] 使用css的attr()写一个类似a标签title的提示框 .box{position:relative;}.box:hover{content: attr(data-title); di ...
利用输入输出流及文件类编写一个程序，可以实现在屏幕显示文本文件的功能，类似DOS命令中的type命令
利用输入输出流及文件类编写一个程序,可以实现在屏幕显示文本文件的功能,类似DOS命令中的type命令 package p1;import java.io.BufferedReader; import ...

利用html加css以及JavaScript写一个学生后台管理系统简单平台

利用html加css以及JavaScript写一个学生后台管理系统简单平台相关推荐

最新文章

热门文章