需求：
分页显示学生信息、增加学生、删除、修改学生、查询学生信息
用的是Bootstrap里面的框架，首先要引入<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.css" rel="stylesheet">链接地址
html样式
<div class="main">
<!-- 学生信息 -->
<div class="panel panel-primary left">
<div class="panel-heading">学生列表</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<ul class="pagination" id="pagination"> </ul>
<input type="button" class="btn btn-primary" value="刷新" id="fresh">
</div>
</div>
<div class="right left">
<!-- 新增学生 -->
<div class="panel panel-warning">
<div class="panel-heading">新增学生</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名：</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="学生姓名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">年龄：</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="学生年龄">
</div>
</div>
<div class="form-group flex">
<label for="inputPassword3" class="col-sm-2 control-label">性别：</label>
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label for="male">
<input type="radio" id="male" name="sex"> 男
</label>
<label for="female">
<input type="radio" id="female" name="sex"> 女
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" id='increase' class="btn btn-default " value="确认新增">
</div>
</div>
</form>
</div>
</div>
<!-- 删除学生 -->
<div class="panel panel-info">
<div class="panel-heading">修改学生</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名：</label>
<div class="col-sm-10">
<input type="text" class="form-control changeName" id="inputEmail3" placeholder="学生姓名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">年龄：</label>
<div class="col-sm-10">
<input type="text" class="form-control changeAge" id="inputPassword3"
placeholder="学生年龄">
</div>
</div>
<div class="form-group flex">
<label for="inputPassword3" class="col-sm-2 control-label">性别：</label>
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox" id="sex">
<label for="maleSex">
<input type="radio" id="maleSex" name="sex"> 男
</label>
<label for="femaleSex">
<input type="radio" id="femaleSex" name="sex"> 女
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" class="btn btn-default" id="confirm" value="确认修改">
</div>
</form>
</div>
</div>
<!-- 查询学生 -->
<div class="panel panel-success">
<div class="panel-heading">查询学生</div>
<div class="panel-body">
<form class="form-inline" role="form">
<select name="" id="selete">
<option value="请输入学号">学号</option>
<option value="请输入姓名">姓名</option>
<option value="请输入年龄">年龄</option>
<option value="请输入性别">性别</option>
</select>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2"></label>
<input type="text" class="form-control searchBox" id="exampleInputPassword2"
placeholder="请输入学号">
</div>
<input type="button" class="btn btn-default" id="queryInfo" value="查询">
</form>
</div>
</div>
</div>
</div>
CSS样式
*{
margin: 0;
padding: 0;
}
.main{
width: 1250px;
margin: auto;
margin-top: 50px;
display: flex;
justify-content: space-between;
}
/* 左边 */
.left{
width: 600px;
}
th,td{
text-align: center;
}
td>input{
border: none;
color: white;
width: 50px;
height: 30px;
border-radius: 10%;
}
td>input:first-child{
background-color: orange;
margin-right: 20px;
}
td>input:last-child{
background-color: skyblue;
}
/* 右边 */
.flex{
display: flex;
}
.flex>div{
margin-left: -20px;
}
#selete{
padding: 6px 12px;
border-radius: 4px;
border: gainsboro 1px solid;
}
#fresh{
display: block;
}
#page{
margin: 0 35%;
width: 300px;
}
js代码
let studentArr = [
{ id: 1, name: '张三', age: '24', gender: '男' },
{ id: 2, name: '李四', age: '22', gender: '男' },
{ id: 3, name: '王五', age: '21', gender: '男' },
{ id: 4, name: '赵六', age: '22', gender: '男' },
{ id: 5, name: '夏琦', age: '20', gender: '女' },
{ id: 6, name: '夏芋', age: '22', gender: '女' },
{ id: 7, name: '罗雷', age: '20', gender: '男' },
{ id: 8, name: '陈妍', age: '23', gender: '女' },
{ id: 9, name: '杨雪', age: '21', gender: '女' },
{ id: 10, name: '陈吉', age: '20', gender: '男' },
{ id: 11, name: '张宏', age: '23', gender: '男' },
];
let tbody = document.querySelector('tbody'); //获取到tbody
let newStudentArr = [];
//填入信息
let data = studentArr.slice(0, 5); //截取数组前十个为一组，在第一页显示
function fill(arr) {
tbody.innerHTML = arr.map(item => //将学生信息通过遍历数组，拼接字符串的形式渲染到 tbody中
`
<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.age}</td>
<td>${item.gender}</td>
<td>
<input type="button" value="修改" data-id=${item.id}>
<input type="button" value="删除" data-id=${item.id}>
</td>
</tr>
`
).join('')
}
//分页
let totalPage = Math.ceil(studentArr.length / 5); //总页数，学生个数除以10向上取整
let currentPage = 1; //刷新之后当前页始终是第一页
//将页码动态添加进ul
function page() {
//前一页按钮
let previous = `
<li>
<a href="#" aria-label="Previous" data-name='previous' data-num=${currentPage}>«</a>
</li>`;
//后一页按钮
let next = `
<li>
<a href="#" aria-label="Next" data-name='next' data-num=${currentPage}> » </a>
</li>`;
let str = ''; //空字符串装多个 li
for (let i = 1; i <= totalPage; i++) { //当总页数增加的时候，li 的个数也会增加
str += `<li><a href="#" data-num=${i}>${i}</a></li>`;
}
pagination.innerHTML = previous + str + next; //将页码渲染到ul中
}
//分页跳转 事件委托
function turn(arr, data) {
pagination.onclick = function (event) { //给ul一个事件委托
currentPage = event.target.dataset.num; //当前页为点击对象的值
if (event.target.dataset.name == 'next') {
if (currentPage < totalPage) {
currentPage = parseInt(currentPage) + 1;
}
}
if (event.target.dataset.name == 'previous') {
if (currentPage > 1) {
currentPage = parseInt(currentPage) - 1;
}
}
data = arr.slice((currentPage - 1) * 5, currentPage * 5); //当我点击的li的值改变时，我data数组截取的范围改变
fill(data);
page();
}
}
page(); //调用渲染页码函数
fill(data); //调用填入方法
refresh(); //刷新
turn(studentArr, data); //调用翻页
add(); //调用新增方法
click(studentArr, studentArr); //调用修改函数
query(); //查询
//新增
function add() {
increase.onclick = function () {
let gender; //性别
let name = document.querySelector('#inputEmail3'); //姓名输入框
let age = document.querySelector('#inputPassword3'); //年龄输入框
if (male.checked == true) { //默认选中男为真
gender = '男';
} else {
gender = '女';
}
let id = 0; //id先给一个初始值为0
if (studentArr.length == 0) { //如果学生数组长度为0
id = 1; //就将id赋值为1
} else { //否则
id = studentArr[studentArr.length - 1].id + 1; //id编号为数组中最后一个对象的id值加1
}
if (name.value && age.value) { //名字输入框和年龄输入框都不为空的时候才可以添加
//将新增加的内容添加到数组中
studentArr.push({ id, name: name.value, age: age.value, gender });
data = studentArr.slice((currentPage - 1) * 5, currentPage * 5);
fill(data); //重新渲染显示在页面
totalPage = Math.ceil(studentArr.length / 5);
page(); //调用渲染页码函数
//清空填入的内容
name.value = '';
age.value = '';
//清空选择的性别
male.checked = false;
female.checked = false;
newStudentArr = [];
}
}
}
// 修改+删除
function click(arr, newArr) { //arr是原数组，newArr查询后得到的数组
tbody.onclick = function (event) {
let changeName = document.querySelector('.changeName'); //获取修改学生信息的名字input
let changeAge = document.querySelector('.changeAge'); //获取修改学生信息的年龄input
if (event.target.value == '修改') { //如果点击对象的value值为修改
let id = event.target.dataset.id; //拿到自定义属性id值，也就是对象在数组中的id
arr.filter(function (item) {
if (item.id == id) { //通过遍历数组拿到id值相同的学生对象
changeName.value = item.name; //将学生对象的名字赋值到名字input
changeAge.value = item.age; //将学生对象的年龄赋值到年龄input
if (item.gender == '女') { //如果性别是女
femaleSex.checked = true; //将女单选框默认选中
} else {
maleSex.checked = true; //将男单选框默认选中
}
let confirm = document.querySelector('#confirm'); //获取确认修改按钮
confirm.onclick = function () {
item.name = changeName.value; //将输入框中的名字赋值给对象的name属性
item.age = changeAge.value; //将输入框中的年龄赋值给对象的age属性
if (femaleSex.checked == true) { //如果性别是女的单选框默认被选中
item.gender = '女'; //性别为女
} else {
item.gender = '男'; //否则性别为男
}
if (newStudentArr.length > 0) {
fill(newArr); //重新渲染显示在页面
} else {
fill(data); //重新渲染显示在页面
console.log('heihie');
}
fill(data); //重新渲染显示在页面
//使输入框回到原始样式
changeName.value = '';
changeAge.value = '';
//清空性别的默认选择
maleSex.checked = false;
femaleSex.checked = false;
}
}
})
}
//删除
if (event.target.value == '删除') { //当点击目标的 value 值为删除
let result = confirm('确认是否删除'); //返回的是1，就是确认，返回的是0，就是取消
if (result == 1) {
let id = event.target.dataset.id; //拿到自定义属性id值，也就是对象在数组中的id
arr.map(function (item, index) {
if (item.id == id) {
arr.splice(index, 1); //原学生数组删除
}
})
}
data = studentArr.slice(0, 5); //截取数组前十个为一组，在第一页显示
fill(data); //重新渲染显示在页面
newStudentArr = [];
totalPage = Math.ceil(studentArr.length / 5);
page(); //调用渲染页码函数
}
}
}
//查询
function query() {
let selete = document.querySelector('#selete'); //获取selete下拉列表
let searchBox = document.querySelector('.searchBox'); //获取查询前面的输入框
selete.onchange = function () { //元素内容发生改变时触发
searchBox.placeholder = selete.value; //下拉列表的option value值赋值给输入框的提示文字
}
queryInfo.onclick = function () { //查询按钮的点击事件
if (selete.value == "请输入学号") { //按学号查询
newStudentArr = studentArr.filter(function (item) {
return item.id == searchBox.value; //保留对象id和输入框中值一样的对象
})
}
if (selete.value == "请输入姓名") { //按姓名查询
newStudentArr = studentArr.filter(function (item) {
return item.name == searchBox.value; //保留对象的名字和输入框中的值相同的
})
}
if (selete.value == "请输入年龄") { //按年龄查询
newStudentArr = studentArr.filter(function (item) {
return item.age == searchBox.value;
})
}
if (selete.value == "请输入性别") { //按年龄查询
newStudentArr = studentArr.filter(function (item) {
return item.gender == searchBox.value;
})
}
totalPage = Math.ceil(newStudentArr.length / 5); //总页数，学生个数除以10向上取整
currentPage = 1; //刷新之后当前页始终是第一页
page(); //更新页码
let datas = newStudentArr.slice(0, 5); //截取数组前十个为一组，在第一页显示
fill(datas); //调用填入方法，传参为查询后的数组
turn(newStudentArr, datas); //调用翻页函数，传参查询得到的数组，和截取的数组
click(studentArr, newStudentArr); //调用修改函数
searchBox.value = ''; //查询输入框回到原始样式
}
}
//刷新
function refresh() {
fresh.onclick = function () {
newStudentArr = [];
totalPage = Math.ceil(studentArr.length / 5); //总页数，学生个数除以10向上取整
currentPage = 1; //刷新之后当前页始终是第一页
page();
data = studentArr.slice(0, 5); //截取数组前十个为一组，在第一页显示
fill(data); //调用渲染函数
turn(studentArr, data); //调用翻页
}
}
\
