使用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>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: red;
}
.sbg {
position: absolute;
top: 0;
width: 100%;
height: 100%;
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>
<!--main 标签规定文档的主要内容 -->
<!-- <main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单 -->
<header>
<hr />
<h1>学生信息管理系统</h1>
<hr />
</header>
<main>
<div>
<div id="adbt">
<button class="gre" id="add">新增人员</button>
<button class="red" id="delete">删除</button>
<!-- <input type="button" id="btn2" value="重置"> -->
</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>
<!-- <td>管理</td> -->
</tr>
</tbody>
</table>
<div id="navigate">
<p>第<span id="pgn"></span>页,共<span id="en"></span>条 (每页最多显示10条)</p>
<!--Number of entries-->
<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>
