前端-学生信息管理系统

待我称王封你为后i 2023-10-02 16:04 8阅读 0赞

**使用html，css，jq，js做的**

**可以实现增删改功能**

代码展示

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title></title>  
<script src="jq/jquery-3.6.0.min.js"></script>  
<script>  
$(function() \{  
// 数据  
let students = \[\{ //初始界面数据  
office: "办公室",  
name: "办公室人事专员", //my idol  
academy: "合同管理小明",  
major: "test1",  
grade: "是",  
f: "否",  
ji: "激活",  
\}, \{  
office: "办公室",  
name: "办公室人事专员",  
academy: "合同管理小明",  
major: "test1",  
grade: "是",  
f: "否",  
ji: "激活",  
\}, \{  
office: "办公室",  
name: "办公室人事专员", //my idol  
academy: "合同管理小明",  
major: "test1",  
grade: "是",  
f: "否",  
ji: "激活",  
\}, \{  
office: "办公室",  
name: "办公室人事专员", //my idol  
academy: "合同管理小明",  
major: "test1",  
grade: "是",  
f: "否",  
ji: "激活",  
\}, \{  
office: "办公室",  
name: "办公室人事专员", //my idol  
academy: "合同管理小明",  
major: "test1",  
grade: "是",  
f: "否",  
ji: "激活",  
\}, \{  
office: "办公室",  
name: "办公室人事专员", //my idol  
academy: "合同管理小明",  
major: "test1",  
grade: "是",  
f: "否",  
ji: "激活",  
\}, \{  
office: "办公室",  
name: "办公室人事专员", //my idol  
academy: "合同管理小明",  
major: "test1",  
grade: "是",  
f: "否",  
ji: "激活",  
\}, \{  
office: "办公室",  
name: "办公室人事专员", //my idol  
academy: "合同管理小明",  
major: "test1",  
grade: "是",  
f: "否",  
ji: "激活",  
\}, \{  
office: "办公室",  
name: "办公室人事专员", //my idol  
academy: "合同管理小明",  
major: "test1",  
grade: "是",  
f: "否",  
ji: "激活",  
\}, \{  
office: "办公室",  
name: "办公室人事专员", //my idol  
academy: "合同管理小明",  
major: "test1",  
grade: "是",  
f: "否",  
ji: "激活",  
\}\];  
// // 获取上面数据并显示  
// let ji="激活";  
let page = 1; //第几页  
let no = 0; //显示的页数的第一个对象是数组中的第几个对象，初始下标为0  
let stuNumber = students.length;  
for (let i = 0; i < 10; i++) \{ //初始页面信息显示  
let student = $("<tr>" + "<td><input type=\\"checkbox\\"></td>" + "</td>" + "<td>" +  
students\[i\].office + "</td>" + "<td>" + students\[i\].name + "</td>" + "<td>" + students\[  
i\].academy + "</td>" + "<td>" + students\[i\].major + "</td>" + "<td>" +  
students\[i\].grade + "</td>" + "<td>" + students\[i\].f + "</td>" + "<td>" + students\[i\].ji +  
"</td>" +  
"</label></tr>");  
$("tbody").append(student);  
\}

// 触发新增按钮  
$("tbody").trigger("create"); //trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）  
$("\#pgn").text(page);  
$("\#en").text(stuNumber);  
$("\#add").click(function() \{ //点击新增按钮触发的动作  
$("\#sbg").addClass("sbg");  
$("\#asi").show();  
\});

// 新增提交之后  
let objKeys = \["office", "name", "academy", "major", "grade", "f", "ji"\];  
$("\#submit").click(function() \{ //提交按钮点击触发的动作  
let student = \{\};  
let isEmpty = false;  
$("\#asi").find("input").each(function(index, domEle) \{  
if (!domEle.value) \{ //如果添加时表单内有值为空，则不进行添加  
isEmpty = true;  
/\*return;\*/  
\}  
student\[objKeys\[index\]\] = domEle.value;  
\});  
if (!isEmpty) \{  
students\[stuNumber\] = student;  
stuNumber++;  
$("\#en").text(stuNumber);  
let lpren = $("tbody tr").length; //最后一页剩余的条目数;  
if (no + 10 > stuNumber && lpren < 10) \{ //增加一个append函数，如果显示的是最后一页那么需要更新界面。  
$("tbody tr:last").after("<tr>" +  
"<td><input type=\\"checkbox\\"></td>" +  
"<td>" +student.office + "</td>" +  
"<td>" + student.name + "</td>" +  
"<td>" + student.academy + "</td>" +  
"<td>" + student.major + "</td>" +  
"<td>" +student.grade + "</td>" +  
"<td>" + student.f + "</td>" +  
"<td>" + student.ji + "</td>" +  
"</tr>");  
\}  
\}  
$("\#sbg").removeClass("sbg");  
$("\#asi").hide();

\});

// 新增一个  
let update = (no) => \{  
let i = 0; //用于增加信息条目的变量;  
$("tbody tr:first").siblings().remove(); //清空界面  
while (i < 10 && no + i < stuNumber) \{  
// office: "办公室",  
// name: "办公室人事专员", //my idol  
// academy: "合同管理小明",  
// major: "test1",  
// grade: "是",  
// f: "否",  
// ji: "激活",  
  
  
let student = $("<tr>" +  
"<td><input type=\\"checkbox\\"></td>" +  
"<td>" + students\[i\].office + "</td>" +  
"<td>" + students\[i\].name + "</td>" +  
"<td>" +students\[i\].academy + "</td>" +  
"<td>" +students\[i\].major + "</td>" +  
"<td>" +students\[i\].grade + "</td>" +  
"<td>" +students\[i\].f + "</td>" +  
"<td>" +students\[i\].ji + "</td>" +  
"</tr>");  
$("tbody").append(student);  
i++;  
\}  
$("tbody").trigger("create");  
\}

// 取消按钮  
$(".cancel").click(function() \{ //多个取消按钮点击触发的动作  
$("\#sbg").removeClass("sbg");  
$(".achaesi").hide();  
\});

// 全选  
$("tbody tr td:first").click(function() \{ //全选操作用到了JQuery的隐示迭代  
$("tbody tr td input").prop("checked", $("tbody tr:first td:first input").prop("checked"));  
\});

// 重置按钮  
// $(function() \{  
// //设置首行  
// $("tr td:first").css("font-weight", "bold");  
// //删除指定属性的元素  
// $("\#btn2").click(function() \{  
// $("tr td").remove("li\[title=t\]");  
// //删除节点中第8个元素  
// $("tr td:eq(8)").remove();  
// \})  
// \});  
// $('table td,table th').html('');//清除所以table内容

// 删除  
$("\#delete").click(function() \{  
if (confirm("确认要删除这些信息吗？")) \{  
let delNumber = 0; //删除的信息条目数;  
let delIndexs = \[\]; //删除信息条目的下标;用于后期处理避免“落空”导致移动无效  
// let i = 0;//用于增加信息条目的变量;  
$("tbody tr td input").each(function(index, domEle) \{  
if (index != 0 && $(domEle).prop("checked")) \{ //index != 0,防止标题行被删除  
delIndexs\[delIndexs.length\] = $(domEle).parent().next().text();  
$(domEle).parent().parent().remove();  
delNumber++;  
\}  
\});  
\}  
\});

// 页数  
$("\#nextpage").click(function() \{  
if (no + 10 < stuNumber) \{  
no += 10;  
page++;  
$("\#pgn").text(page);  
update(no);  
$("tbody tr:first td:first input").prop("checked", false);  
\} else \{  
alert("已经是最后一页。");  
\}  
\});

$("\#lastpage").click(function() \{  
if (no - 10 >= 0) \{  
no -= 10;  
page--;  
$("\#pgn").text(page);  
update(no);  
$("tbody tr:first td:first input").prop("checked", false);  
\} else \{  
alert("已经是第一页。");  
\}  
\});  
\})  
</script>

a \{  
text-decoration: none;  
color: red;  
\}

.sbg \{  
position: absolute;  
top: 0;  
width: 100%;  
height: 100%;  
background-color: black;  
opacity: 0.4;  
z-index: 1;  
\}

body \{  
background-color: \#f0ece9;  
\}

header \{  
display: flex;  
flex-flow: row nowrap;  
justify-content: space-between;  
\}

header h1 \{  
color: \#9a9897;  
\}

header hr \{  
margin: 20px 20px 0;  
background-color: \#bc9470;  
border: 2px solid \#bc9470;  
width: 30%;  
height: 0;  
\}

main \#adbt \{  
margin-left: 70px;  
\}

main button \{  
margin: 20px 5px;  
width: 85px;  
height: 40px;  
color: white;  
\}

main button.gre \{  
background-color: \#5cb85c;  
\}

main button.red \{  
background-color: \#d9534f;  
\}

main \#navigate \{  
padding: 0 70px;  
display: flex;  
flex-flow: row nowrap;  
justify-content: space-between;  
\}

main \#navigate p \{  
margin-top: 30px;  
\}

table \{  
margin: 0 auto;  
width: 90%;  
text-align: center;  
border-spacing: 0;  
\}

table tbody tr:first-of-type \{  
background-color: \#dadee1 !important;  
height: 60px;  
\}

table tbody tr \{  
height: 45px;  
\}

table tbody tr:nth-child(odd) \{  
background-color: \#eef1f8;  
\}

table tbody tr:nth-child(even) \{  
background-color: \#ffffff;  
\}

table tbody tr:not(\[id=thead\]):hover \{  
cursor: pointer;  
background-color: \#e9e9e9;  
\}

.achaesi \{  
display: none;  
position: absolute;  
top: 20%;  
left: 34%;  
background-color: white;  
z-index: 2;  
width: 500px;  
height: 420px;  
\}

.achaesi h2 \{  
padding: 5px 20px;  
font-size: large;  
background-color: \#555555;  
color: white;  
\}

.achaesi .ifm \{  
width: 340px;  
margin: 10px auto;  
display: flex;  
flex-flow: column nowrap;  
\}

.achaesi .ifm div \{  
margin: 10px;  
\}

.achaesi .ifm div input \{  
width: 220px;  
height: 20px;  
\}

.achaesi .scbt \{  
float: right;  
margin-top: 6px;  
margin-right: 30px;  
\}

.achaesi .scbt button:first-of-type \{  
width: 85px;  
height: 36px;  
background-color: \#5cb85c;  
\}

.achaesi .scbt button:last-of-type \{  
width: 85px;  
height: 36px;  
background-color: white;  
\}  
header \{  
display: flex;  
flex-flow: row nowrap;  
justify-content: space-between;  
\}  
  
header h1 \{  
color: \#9a9897;  
\}  
  
header hr \{  
margin: 20px 20px 0;  
background-color: \#bc9470;  
border: 2px solid \#bc9470;  
width: 30%;  
height: 0;  
\}  
</style>

</head>  
<body>  
<div>  
  
  
<header>  
<hr />  
<h1>学生信息管理系统</h1>  
<hr />  
</header>  
<main>  
<div>  
<div id="adbt">  
<button class="gre" id="add">新增人员</button>  
<button class="red" id="delete">删除</button>  
  
</div>  
<table>  
<tbody>  
<tr id="thead">  
<td><input type="checkbox"></td>  
<td>所属组织</td>  
<td>岗位</td>  
<td>姓名</td>  
<td>账号</td>  
<td>主岗位</td>  
<td>负责人</td>  
<td>状态</td>  
  
</tr>  
</tbody>  
</table>  
<div id="navigate">  
<p>第<span id="pgn"></span>页,共<span id="en"></span>条 (每页最多显示10条)</p>  
  
<div id="tpbt">  
<button class="gre" id="lastpage">上一页</button>  
<button class="red" id="nextpage">下一页</button>  
</div>  
</div>  
</div>  
</main>  
</div>  
<div id="sbg"></div>  
  
<div class="achaesi" id="asi">  
<h2>新增人员信息</h2>  
<div class="ifm">  
<div><label for="assn">所属组织</label> <input id="assn" type="text" placeholder="办公室" required="required" maxlength="11"  
pattern="^\[0-9\]\{11\}$" oninvalid="setCustomValidity('请输入11位的数字组合')"></div>  
<div><label for="asn">岗位</label> <input id="asn" type="text" placeholder="人事" required="required" minlength="2"  
maxlength="8" pattern="^\[\\u4e00-\\u9fa5\]+$" oninvalid="setCustomValidity('请输入正确的姓名')"></div>  
<div><label for="asac">姓名</label> <input id="asac" type="text" placeholder="张宗毅" required="required" minlength="3"  
maxlength="10" pattern="^\[\\u4e00-\\u9fa5\]+$" oninvalid="setCustomValidity('请输入正确的学院名')"></div>  
<div><label for="asm">账号</label> <input id="asm" type="text" placeholder="test1" required="required" minlength="3"  
maxlength="12" pattern="^\[\\u4e00-\\u9fa5\]+$" oninvalid="setCustomValidity('请输入正确的专业名')"></div>  
<div><label for="asc">主岗位</label> <input id="asc" type="text" placeholder="是否" required="required">  
</div>  
<div><label for="asc">负责人</label> <input id="asc" type="text" placeholder="是否" required="required">  
</div>  
<div><label for="asag">状态</label> <input id="asag" placeholder="激活" required="required" pattern="^\[\\u4e00-\\u9fa5\]+$"  
oninvalid="setCustomValidity('请输入正确的年龄')"></div>  
</div>  
<hr />  
<div class="scbt">  
<button type="submit" id="submit">提交</button>  
<button class="cancel">取消</button>  
</div>  
</div>  
</body>  
</html>

提权源码及图片链接：https://pan.baidu.com/s/1A2yMbKfEJ0mjFUmP345jOA  
提取码：iogb