【web】综合利用HTML、CSS和JavaScript （jQuery）实现一个学生信息管理系统（不含后端）

最新推荐文章于 2022-07-21 17:38:17 发布

Acratons

最新推荐文章于 2022-07-21 17:38:17 发布

阅读量4.2k

点赞数 14

文章标签： html js jquery css web

本文链接：https://blog.csdn.net/Acratons/article/details/110926834

版权

web小作业，未连接后端，用的jQuery实现的。
学生端信息用的数组保存的
可以增删改查，只有id做表单验证，但是学号不可以重复。
全选，删除，两页的最后一页删完了自动跳上一页
index

表单验证
修改学生
下一页
html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="2.js"></script>
    <link rel="stylesheet" href="2.css">
</head>

<body>

</body>
    <div class="studentSystem">
        <div class="head">
            <div class="hr_head_left"></div>
            <h2 class="head_title">学生信息管理系统</h2>
            <div class="hr_head_right"></div>
        </div>
        <button type="button" class="addStudent">新增</button>
        <button type="button" class="delStudent">删除</button>
        <table class="studentTable">
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>序号</td>
                <td>学号</td>
                <td>姓名</td>
                <td>学院</td>
                <td>专业</td>
                <td>年级</td>
                <td>班级</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
        </table>
        <div class="bottomBox">
            <label class="newPage">第1页，共27页（每页十条）</label>
            <button type="button" class="prePage">上一页</button>
            <button type="button" class="nextPage">下一页</button>
        </div>

        <!--        增加-->
        <div class="addStudentBox" style="display: none">
            <span class="addStudentBoxTitle">新增学生</span>
            <div class="inputInfo">
                <label>学号</label><input placeholder="只能输入11位数字作为Id" class="id" type="text"><i></i><br>
                <label>姓名</label><input placeholder="中文或字母作为名字" type="text"><br>
                <label>学院</label><input placeholder="例如：人工智能学院" type="text"><br>
                <label>专业</label><input placeholder="例如：软件工程" type="text"><br>
                <label>年级</label><input placeholder="四位数字：如2019" type="text"><br>
                <label>班级</label><input placeholder="两位以下数字：如12" type="text"><br>
                <label>年龄</label><input placeholder="两位以下数字：如19" type="text"><br>
            </div>
            <hr style="margin-bottom: 15px">
            <div class="addStudentBoxFooter">
                <button type="button" class="addStudentBoxYes">确定</button>
                <button type="button" class="addStudentBoxNo">取消</button>
            </div>
        </div>
        <!--        查看学生-->
        <div class="checkStudentBox" style="display: none">
            <span class="checkStudentBoxTitle">查看学生</span>
            <div class="checkInputInfo">
                <label>学号</label><input disabled type="text"><br>
                <label>姓名</label><input disabled type="text"><br>
                <label>学院</label><input disabled type="text"><br>
                <label>专业</label><input disabled type="text"><br>
                <label>年级</label><input disabled type="text"><br>
                <label>班级</label><input disabled type="text"><br>
                <label>年龄</label><input disabled type="text"><br>
            </div>
            <hr style="margin-bottom: 15px">
            <div class="checkStudentBoxFooter">
                <button type="button" class="checkStudentBoxYes">确定</button>
            </div>
        </div>

        <!--        修改学生-->
        <div class="changeStudentBox" style="display: none">
            <span class="changeStudentBoxTitle">修改学生</span>
            <div class="changeInputInfo">
                <label>学号</label><input placeholder="只能输入11位数字作为Id" class="checkId" type="text"><i></i><br>
                <label>姓名</label><input placeholder="中文或字母作为名字" type="text"><br>
                <label>学院</label><input placeholder="例如：人工智能学院" type="text"><br>
                <label>专业</label><input placeholder="例如：软件工程" type="text"><br>
                <label>年级</label><input placeholder="四位数字：如2019" type="text"><br>
                <label>班级</label><input placeholder="两位以下数字：如12" type="text"><br>
                <label>年龄</label><input placeholder="两位以下数字：如19" type="text"><br>
            </div>
            <hr style="margin-bottom: 15px">
            <div class="changeStudentBoxFooter">
                <button type="button" class="changeStudentBoxYes">确定</button>
                <button type="button" class="changeStudentBoxNo">取消</button>
            </div>
        </div>
    </div>

</html>

css代码

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(240, 236, 233);
}
.studentSystem{
    width: 1500px;
    height: 800px;
    margin: 0 auto;
    background-color: rgb(240, 236, 233);
}
.hr_head_left{
    height: 4px;
    width: 40%;
    background-color: rgba(217, 175, 31, 0.45);
    border-radius: 10px;
    margin-top: 46px;
    margin-left: 10px;
    float: left;
}
.hr_head_right{
    height: 4px;
    width: 40%;
    background-color: rgba(217, 175, 31, 0.45);
    border-radius: 10px;
    margin-top: 46px;
    margin-right: 10px;
    float: right;
}
.head_title{
    margin-left: 45px;
    margin-top: 30px;
    display: inline-block;
}
button{
    margin-left: 10px;
    width: 80px;
    height: 30px;
    color: rgb(241, 255, 255);
}
.addStudent{
    background-color: rgb(92, 184, 92);
}
.delStudent{
    background-color: rgb(217, 83, 79);
}
.studentTable{
    width: 1480px;
    height: auto;
    border: 1px solid black;
    text-align: center;
    margin-left: 10px;
    margin-top: 10px;
}
table{
    border-collapse:collapse;
}
a{
    color: red;
    padding-left: 2px;
}
.bottomBox{
    position: absolute;
    top: 750px;
    margin-left: 10px;
}
.prePage{
    margin-left: 1050px;
    background: rgb(217, 83, 79);
}
.nextPage{
    background-color: rgb(92, 184, 92);
}
.odd, .even{
    height: 55px;
}
.studentTable .odd{
    background-color: rgb(255, 255, 255);
}
.studentTable .even{
    background-color: rgb(238, 241, 248);
}
.addStudentBox{
    width: 580px;
    height: 605px;
    border: 1px solid black;
    position: absolute;
    top: 103px;
    left: 508px;
    background-color: white;
}
.addStudentBox .addStudentBoxTitle{
    display: inline-block;
    width: 555px;
    height: 47px;
    background-color: black;
    color: white;
    font-size: 20px;
    line-height: 48px;
    padding-left: 10px;
}
.addStudentBox .inputInfo{
    width: 345px;
    padding-left: 135px;
    padding-right: 100px;
    font-size: 20px;
    height: 490px;
}
.addStudentBox .inputInfo input{
    width: 250px;
    height: 30px;
    margin-top: 33px;
    margin-left: 25px;
}
.addStudentBoxYes{
    background-color: rgb(92, 184, 92);
}
.addStudentBoxNo{
    background: rgb(217, 83, 79);
}
.addStudentBoxFooter{
    margin-left: 355px;
}

/*查看学生*/
.checkStudentBox{
    width: 580px;
    height: 605px;
    border: 1px solid black;
    position: absolute;
    top: 103px;
    left: 508px;
    background-color: white;
}
.checkStudentBox .checkStudentBoxTitle{
    display: inline-block;
    width: 555px;
    height: 47px;
    background-color: black;
    color: white;
    font-size: 20px;
    line-height: 48px;
    padding-left: 10px;
}
.checkStudentBox .checkInputInfo{
    width: 345px;
    padding-left: 135px;
    padding-right: 100px;
    font-size: 20px;
    height: 490px;
}
.checkStudentBox .checkInputInfo input{
    width: 250px;
    height: 30px;
    margin-top: 33px;
    margin-left: 25px;
}
.checkStudentBoxYes{
    background-color: rgb(92, 184, 92);
}
.checkStudentBoxNo{
    background: rgb(217, 83, 79);
}
.checkStudentBoxFooter{
    margin-left: 355px;
}
span{
    padding-right: 15px;
    cursor: pointer;
}

/*修改学生*/
.changeStudentBox{
    width: 580px;
    height: 605px;
    border: 1px solid black;
    position: absolute;
    top: 103px;
    left: 508px;
    background-color: white;
}
.changeStudentBox .changeStudentBoxTitle{
    display: inline-block;
    width: 555px;
    height: 47px;
    background-color: black;
    color: white;
    font-size: 20px;
    line-height: 48px;
    padding-left: 10px;
}
.changeStudentBox .changeInputInfo{
    width: 345px;
    padding-left: 135px;
    padding-right: 100px;
    font-size: 20px;
    height: 490px;
}
.changeStudentBox .changeInputInfo input{
    width: 250px;
    height: 30px;
    margin-top: 33px;
    margin-left: 25px;
}
.changeStudentBoxYes{
    background-color: rgb(92, 184, 92);
}
.changeStudentBoxNo{
    background: rgb(217, 83, 79);
}
.changeStudentBoxFooter{
    margin-left: 355px;
}
.even:hover{
    background-color: pink;
}
.odd:hover{
    background-color: pink;
}

js代码

class Student {
    constructor(id,name,studentStatus,major,grade,classes,age,) {
        this._id = id;
        this._name = name;
        this._studentStatus = studentStatus;
        this._major = major;
        this._grade = grade;
        this._classes = classes;
        this._age = age;
    }

    get id() {
        return this._id;
    }

    set id(value) {
        this._id = value;
    }

    get name() {
        return this._name;
    }

    set name(value) {
        this._name = value;
    }

    get studentStatus() {
        return this._studentStatus;
    }

    set studentStatus(value) {
        this._studentStatus = value;
    }

    get major() {
        return this._major;
    }

    set major(value) {
        this._major = value;
    }

    get grade() {
        return this._grade;
    }

    set grade(value) {
        this._grade = value;
    }

    get classes() {
        return this._classes;
    }

    set classes(value) {
        this._classes = value;
    }

    get age() {
        return this._age;
    }

    set age(value) {
        this._age = value;
    }
}
let students=new Array();
function creatStudent(){
    students.push(new Student("22912050660","sx","人智","软工",20,6,20));
    students.push(new Student("22912050661","sx","人智","软工",20,6,20));
    students.push(new Student("22912050662","sx","人智","软工",20,6,20));
    students.push(new Student("22912050663","sx","人智","软工",20,6,20));
    students.push(new Student("22912050665","sx","人智","软工",20,6,20));
    students.push(new Student("22912050666","sx","人智","软工",20,6,20));
    students.push(new Student("22912050667","sx","人智","软工",20,6,20));
    students.push(new Student("22912050668","sx","人智","软工",20,6,20));
    students.push(new Student("22912050669","sx","人智","软工",20,6,20));
    students.push(new Student("22912050670","sx","人智","软工",20,6,20));
    students.push(new Student("22912050671","sx","人智","软工",20,6,20));
    students.push(new Student("22912050672","sx","人智","软工",20,6,20));
    students.push(new Student("22912050673","sx","人智","软工",20,6,20));

}
creatStudent();
let head=
    "<tr style='background-color: rgb(218, 222, 225);height: 55px'>"+
    "<td><input id='checkAllStudent' name='selectedAllStudent' type='checkbox'></td>"+
    "<td>序号</td>"+
    "<td>学号</td>"+
    "<td>姓名</td>"+
    "<td>学院</td>"+
    "<td>专业</td>"+
    "<td>年级</td>"+
    "<td>班级</td>"+
    " <td>年龄</td>"+
    "<td>操作</td>"+
    "</tr>"

//展示学生
let allPage = parseInt(students.length/10+1)
let currentPage = 1;
let onePage = 10;
let begin = 0;
$(document).ready(function () {
    $(".currentPage").val(currentPage)
    $(".allPage").val(allPage)
    // console.log(students[1])
    // console.log(allPage)
    // console.log($(".currentPage").val())
    $(".studentTable").html(showStudent());
    $(".newPage").html(renewPage())        //页数显示
})

function showStudent() {
    let s = head;
    for (var i = begin; i < onePage&&i<students.length; i++) {
        let oddNum = "<tr class='odd'>"
        let evenNum = "<tr class='even'>"

        if (i % 2 == 0) {   //判断奇偶数  增加class样式
            s = s + oddNum;
        } else {
            s = s + evenNum;
        }
        s = s +
            " <td>" + "<input class='check_student' name='selectedStudent' type='checkbox'>" + "</td>" +
            "<td>" + (i  + 1) + "</td>" +
            "<td>" + students[i]._id + "</td>" +
            '<td>' + students[i]._name + '</td>' +
            "<td>" + students[i]._studentStatus + "</td>" +
            '<td>' + students[i]._major + '</td>' +
            "<td>" + students[i]._grade + "</td>" +
            '<td>' + students[i]._classes + '</td>' +
            "<td>" + students[i]._age + "</td>" +
            "<td><span class='checkStudentBtn'>查看</span><span class='delStudentBtn'>修改</span></td>" +
            "</td>" +
            '</tr>'
    }
    return s;
}
function renewPage() {
    if(students.length%10==0){
        allPage=students.length/10
    }else {
        allPage=(parseInt(students.length/10))+1
    }
    return  "第"+currentPage+"页,共"+allPage+"页（每页十条）"
}
$(function () {
    //下一页
    $(".nextPage").click(function () {
        if (currentPage >= allPage){
            alert("已经是最后一页了")
        }else{
            currentPage += 1;
            begin += 10;
            onePage += 10;  //begin增加，onePage同时增加
            // console.log(currentPage, begin)
            // console.log(showStudent())
            $(".studentTable").html(showStudent());
            $(".newPage").html(renewPage())        //页数显示
        }
    })

    // 上一页的方法
    function prePage (){
        if (currentPage === 1){
            alert("已经是第一页了")
        }else{
            currentPage -= 1;
            begin -= 10;
            onePage -= 10;  //begin增加，onePage同时增加
            // console.log(currentPage, begin)
            // console.log(showStudent())
            $(".studentTable").html(showStudent());
            $(".newPage").html(renewPage())        //页数显示
        }
    }

    //上一页
    $(".prePage").click(function () {
        if (currentPage === 1){
            alert("已经是第一页了")
        }else{
            currentPage -= 1;
            begin -= 10;
            onePage -= 10;  //begin增加，onePage同时增加
            // console.log(currentPage, begin)
            // console.log(showStudent())
            $(".studentTable").html(showStudent());
            $(".newPage").html(renewPage())        //页数显示
        }
    })


    //展示增加学生
    $(".addStudent").click(function () {
        $(".addStudentBox").show();
    })
    //展示增加学生中的确定按钮
    let flag
    $(".addStudentBoxYes").click(function () {
        let addId = $(".inputInfo input").eq(0).val();
        let addName = $(".inputInfo input").eq(1).val();
        let addStudentStatus = $(".inputInfo input").eq(2).val();
        let addMajor = $(".inputInfo input").eq(3).val();
        let addGrade = $(".inputInfo input").eq(4).val();
        let addClass = $(".inputInfo input").eq(5).val();
        let addAge = $(".inputInfo input").eq(6).val();
        alert("确定添加吗");
        // console.log(addId)

        for (var i=0; i<students.length; i++){
            // console.log(addId);
            if (addId === students[i]._id)
                flag = true
        }
        if (flag){
            alert("学号重复，添加失败")
            flag=false;
        }else {
            console.log(addId)
            console.log(students[0])
            students.push(new Student(addId, addName, addStudentStatus, addMajor,addGrade, addClass, addAge))
        }

        $(".addStudentBox").hide();
        //刷新页面
        $(".studentTable").html(showStudent());
        $(".newPage").html(renewPage())        //页数显示

        //值清零下次增加为空
        $(".inputInfo input").eq(0).val("");
        $(".inputInfo input").eq(1).val("");
        $(".inputInfo input").eq(2).val("");
        $(".inputInfo input").eq(3).val("");
        $(".inputInfo input").eq(4).val("");
        $(".inputInfo input").eq(5).val("");
        $(".inputInfo input").eq(6).val("");
    })
    //表单验证
    $('.id').on('blur',function () {
        let reg = /^\d{11}$/;
        let num = 11912050126
        let addId = $(".inputInfo input").eq(0).val();
        console.log(reg.test(addId))
        // console.log(reg.test(parseInt(add)))
        if (reg.test(addId)){
            $(this).next().html("<img src='2.png' style='width: 15px; height: 15px'>")
        }else {
            $(this).next().html("<img src='1.png' style='width: 15px; height: 15px'>")
        }
    })
    $('.checkId').on('blur',function () {
        let reg = /^\d{11}$/;
        let num = 11912050126
        let addId = $(".changeInputInfo input").eq(0).val();
        console.log(reg.test(addId))
        // console.log(reg.test(parseInt(add)))
        if (reg.test(addId)){
            $(this).next().html("<img src='2.png' style='width: 15px; height: 15px'>")
        }else {
            $(this).next().html("<img src='1.png' style='width: 15px; height: 15px'>")
        }
    })

    //展示增加学生中的取消按钮
    $(".addStudentBoxNo").click(function () {
        //值清零下次增加为空
        $(".inputInfo input").eq(0).val("");
        $(".inputInfo input").eq(1).val("");
        $(".inputInfo input").eq(2).val("");
        $(".inputInfo input").eq(3).val("");
        $(".inputInfo input").eq(4).val("");
        $(".inputInfo input").eq(5).val("");
        $(".inputInfo input").eq(6).val("");
        $(".addStudentBox").hide();
    })
    //查看学生
    $(document).on('click','.checkStudentBtn',function (){
        $(".checkStudentBox").show()
        //获取序号
        let num = $(this).parents("tr").children("td").eq(1).text()

        //在学生的数组中根据序号查出该学生
        $(".checkInputInfo input").eq(0).val(students[num-1]._id)
        $(".checkInputInfo input").eq(1).val(students[num-1]._name)
        $(".checkInputInfo input").eq(2).val(students[num-1]._studentStatus)
        $(".checkInputInfo input").eq(3).val(students[num-1]._major)
        $(".checkInputInfo input").eq(4).val(students[num-1]._grade)
        $(".checkInputInfo input").eq(5).val(students[num-1]._classes)
        $(".checkInputInfo input").eq(6).val(students[num-1]._age)
    })
    //查看学生确定按钮
    $(".checkStudentBoxYes").click(function () {
        $(".checkStudentBox").hide()
    })
    let clickNum;//定义全局变量，在修改学生确定按钮可以使用
    //修改学生按钮
    $(document).on('click','.delStudentBtn',function (){
        $(".changeStudentBox").show()
        clickNum = $(this).parents("tr").children("td").eq(1).text()
        console.log(clickNum);
    })

    //修改学生确定按钮
    $(".changeStudentBoxYes").click(function () {
        let changeId = $(".changeInputInfo input").eq(0).val();
        let changeName = $(".changeInputInfo input").eq(1).val();
        let changeStudentStatus = $(".changeInputInfo input").eq(2).val();
        let changedMajor = $(".changeInputInfo input").eq(3).val();
        let changeGrade = $(".changeInputInfo input").eq(4).val();
        let changeClass = $(".changeInputInfo input").eq(5).val();
        let changeAge = $(".changeInputInfo input").eq(6).val();

        $(".changeStudentBox").hide();

        console.log(students[clickNum-1])
        students[clickNum-1]._age = changeAge;
        students[clickNum-1]._classes = changeClass;
        students[clickNum-1]._id = changeId;
        students[clickNum-1]._name = changeName;
        students[clickNum-1]._studentStatus = changeStudentStatus;
        students[clickNum-1]._major = changedMajor;
        students[clickNum-1]._grade = changeGrade;

        $(".studentTable").html(showStudent());
        // $(".newPage").html(renewPage())        //页数显示
    })

    //修改学生取消按钮
    $(".changeStudentBoxNo").click(function () {
        $(".changeStudentBox").hide();
    })

    //全选
    $(document).on('click','#checkAllStudent', function () {
        $("input[name='selectedStudent']").prop("checked", this.checked)
    })

    //删除学生
    $(".delStudent").click(function () {
        let deleteArray = new Array();
        //循环当页面的check，如果选择了就加入删除数组

        for (var i=begin;i<onePage&&i<students.length;i++){
            let isCheck = $(".check_student").eq(i-begin).is(":checked")
            // console.log(isCheck)

            if(isCheck){//i-begin就是第一个
                deleteArray.push(i)
            }
        }
        for (var i=0;i<deleteArray.length;i++){

            console.log(deleteArray[i]-i)
            console.log(deleteArray[i])
            console.log(i)
            students.splice(deleteArray[i]-i,1)
        }

        $(".newPage").html(renewPage())
        $(".studentTable").html(showStudent());

        //判断当前页数和所有页数，是否该页无学生
        if (currentPage > allPage){
            console.log("自带上一页")
            prePage()
        }
    })

})

两张图片
在这里插入图片描述

jQuery是3.3.1

还不够完善，有错误麻烦留言

Acratons

关注

14
点赞
踩
106

收藏

觉得还不错? 一键收藏
9
评论
【web】综合利用HTML、CSS和JavaScript （jQuery）实现一个学生信息管理系统（不含后端）

web小作业，未连接后端，用的jQuery实现的。学生端信息用的数组保存的可以增删改查，没有做表单验证，但是学号不可以重复。
复制链接

扫一扫