js，css，html学生管理系统，表格输出，增加，修改，查看，翻页功能，隔行换色，

新手小k

已于 2023-07-13 10:00:38 修改

阅读量1.7k

点赞数 6

分类专栏：前端文章标签： javascript 学习 css html js

于 2022-07-14 17:39:58 首次发布

本文链接：https://blog.csdn.net/m0_68563545/article/details/125781006

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、学生管理系统

1、总代码

js总代码

//作者：楷
let students = [  //定义对象数组，例如students[0]就是第一个对象
    { id: "11503080201", name: "陈三", academy: "工程学院", major: "软件工程", grade: "2015", class: "2", age: "21" },
    { id: "11502070102", name: "大王", academy: "会计学院", major: "会计学", grade: "2015", class: "1", age: "19" },
    { id: "11506080403", name: "小陈", academy: "理学院", major: "数学", grade: "2015", class: "4", age: "20" },
    { id: "11506004010", name: "唐", academy: "两江人工智能学院", major: "智能科学与技术", grade: "2011", class: "1", age: "19" },
    { id: "11506080409", name: "王二麻子", academy: "理学院", major: "数学", grade: "2015", class: "4", age: "20" },
    { id: "11502070108", name: "李二", academy: "会计学院", major: "会计学", grade: "2015", class: "1", age: "19" },
    { id: "11506080405", name: "王五", academy: "理学院", major: "数学", grade: "2015", class: "4", age: "20" },
    { id: "11506080406", name: "嵩明", academy: "理学院", major: "数学", grade: "2015", class: "4", age: "20" },
    { id: "11506070403", name: "晨曦", academy: "理学院", major: "数学", grade: "2015", class: "4", age: "20" },
    { id: "11502070152", name: "李康", academy: "会计学院", major: "会计学", grade: "2015", class: "1", age: "19" },
    { id: "11506080453", name: "开心", academy: "理学院", major: "数学", grade: "2015", class: "4", age: "20" },
    { id: "11506080473", name: "美丽", academy: "理学院", major: "数学", grade: "2015", class: "4", age: "20" },
    { id: "11506080483", name: "魅力", academy: "理学院", major: "数学", grade: "2015", class: "4", age: "20" },
    { id: "11502070162", name: "游离", academy: "会计学院", major: "会计学", grade: "2015", class: "1", age: "19" },
    { id: "11506056043", name: "凯撒", academy: "理学院", major: "数学", grade: "2015", class: "4", age: "20" },
    { id: "11506085403", name: "露安适", academy: "理学院", major: "数学", grade: "2015", class: "4", age: "20" },
    { id: "11506099403", name: "吴巧玲", academy: "理学院", major: "数学", grade: "2015", class: "4", age: "20" },
    { id: "11502058102", name: "阿斯顿", academy: "会计学院", major: "会计学", grade: "2015", class: "1", age: "19" },
    { id: "11506099403", name: "吴巧玲", academy: "理学院", major: "数学", grade: "2015", class: "4", age: "20" },
    { id: "11502058102", name: "阿斯顿", academy: "会计学院", major: "会计学", grade: "2015", class: "1", age: "19" }

]

let p = 0
let page = 0
//用于判断循环次数 
function deal() {
    let page10 = (page + 1) * 10   //页数乘以10
    if (page10 >= students.length) {
        return (students.length - page * 10) + 10 * page
    }
    else {
        return (page + 1) * 10
    }
}
function show() {     //输入数组中每一个对象的功能
    let tab0 = document.getElementById("table1")
    tab0.innerHTML =
        ('<tr>'
            + '<td>' + '<input type="checkbox" id="checkAll" onclick = "allCheck()">' + '</td>'
            + '<td>' + "序号" + '</td>'
            + '<td>' + "学号" + '</td>'
            + '<td>' + "姓名" + '</td>'
            + '<td>' + "学院" + '</td>'
            + '<td>' + "专业" + '</td>'
            + '<td>' + "年级" + '</td>'
            + '<td>' + "班级" + '</td>'
            + '<td>' + "年龄" + '</td>'
            + '<td>' + "操作" + '</td>'
            + '</tr>')
    for (let i = page * 10; i < deal(); i++) {
        let tab = document.getElementById("table1")
        tab.innerHTML +=
            ('<tr><td>' + '<input type="checkbox" name="del1">' + '</td>'
                + '<td>' + (i + 1) + '</td>'
                + '<td>' + students[i].id + '</td>'
                + '<td>' + students[i].name + '</td>'
                + '<td>' + students[i].academy + '</td>'
                + '<td>' + students[i].major + '</td>'
                + '<td>' + students[i].grade + '</td>'
                + '<td>' + students[i].class + '</td>'
                + '<td>' + students[i].age + '</td>'
                + '<td><button type="button" οnclick="showReviseTable(this)">修改</button> <button type="button" οnclick="read(this)">查看</button></td></tr>')
        console.log(tab);
    }
    changeColor()    //输出完成后对实现隔行换色
    showPageNum()    //输出页码
}

show()  

//用于增加对象的面板原本未显示出来，该方法将原本的display="none"改为block，使得面板可见
function showAddTable() {      
    document.getElementById("addTable").style.display = "block";
}
//增加框的确定按钮所对应的方法，具体功能解释在代码处
function sure() {
    //在点击确认后，将增加面板中每一个输入的数据提取出，用于后面赋给一个新的对象
    let id1 = document.getElementById("id").value
    let name1 = document.getElementById("name").value
    let academy1 = document.getElementById("academy").value
    let major1 = document.getElementById("major").value
    let grade1 = document.getElementById("grade").value
    let class1 = document.getElementById("class").value
    let age1 = document.getElementById("age").value
    //判断输入的各数据是否合法（方法可能不太好）
    let a = 0, b = 0, c = 0, d = 0, e = 0, f = 0, g = 0
    if (id1.length != 11)
        a = 1
    if (name1 == null) 
        b = 1
    if (academy1 == null) 
        c = 1
    if (major1 == null) 
        d = 1
    if ((+grade1) < 2000 || (+grade1) > 2022)
        e = 1
    if ((+class1) > 10 || (+class1) < 1)
        f = 1
    if ((+age1) < 1 || (+age1) > 100)
        g = 1
    if ((a + e + f + g) != 0) {
        alert("信息有误，重新输入")
        no()     //执行no()方法，功能包括关闭增加窗口并且输入框中信息清空，便于下次输入新信息
        return false  //返回false，则该方法在此处中止
    }
//若数据合法，将数据赋给一个对象，并将该对象加入对象数组中去，加入后才可把新增的数据展示出来
    let stunew = { id: id1, name: name1, academy: academy1, major: major1, grade: grade1, class: class1, age: age1 }
    students.push(stunew)   //将对象加入数组
    document.getElementById("table1").innerHTML = null  //先把原表中的数据清空
    show()                                          //表中数据清空后再次重新展示所有数据，相当于刷新数据
    no()                //关闭增加窗口并且输入框中信息清空，便于下次输入新信息
}

//增加框的取消，关闭增加窗口并且输入框中信息清空，便于下次输入新信息
function no() {
    //把输入框中已输入的信息清空，以免下一次使用增加功能有信息残留
    document.getElementById("id").value = ""
    document.getElementById("name").value = ""
    document.getElementById("academy").value = ""
    document.getElementById("major").value = ""
    document.getElementById("grade").value = ""
    document.getElementById("class").value = ""
    document.getElementById("age").value = ""
    document.getElementById("addTable").style.display = "none" //隐藏面板
}
function no1() {       //修改框的取消
    document.getElementById("reviseTable").style.display = "none"
}
function no2() {        //关闭查看框
    document.getElementById("readTable").style.display = "none"
}
function no3() {      //删除框的取消
    document.getElementById("delSureTable").style.display = "none"
}
let tr = 0
//修改框的显示并且赋默认值
function showReviseTable(o) {
    document.getElementById("reviseTable").style.display = "block"
    tr = o.parentNode.parentNode.rowIndex    //获取被点击按钮的所在行的行数
    tr = (tr + (page) * 10)      //此语句与翻页功能有关，以免翻页后仍然显示第一页的数据
                        //把该行的所有数据导入修改面板的文本框中
    document.getElementById("id1").value = students[tr - 1].id    
    document.getElementById("name1").value = students[tr - 1].name
    document.getElementById("academy1").value = students[tr - 1].academy
    document.getElementById("major1").value = students[tr - 1].major
    document.getElementById("grade1").value = students[tr - 1].grade
    document.getElementById("class1").value = students[tr - 1].class
    document.getElementById("age1").value = students[tr - 1].age

}
function sure1() {                        //修改框的确认按钮  
    document.getElementById("reviseTable").style.display = "none";
    let id1 = document.getElementById("id1").value
    let name1 = document.getElementById("name1").value
    let academy1 = document.getElementById("academy1").value
    let major1 = document.getElementById("major1").value
    let grade1 = document.getElementById("grade1").value
    let class1 = document.getElementById("class1").value
    let age1 = document.getElementById("age1").value  
    //把新的数据赋给需要修改的对象
    students[tr - 1] = { id: id1, name: name1, academy: academy1, major: major1, grade: grade1, class: class1, age: age1 }
    show()
    document.getElementById("reviseTable").style.display = "none";
}
let tr1 = 0
function read(o) {                        //查看功能，与修改功能些许相似，可参照修改功能
    document.getElementById("readTable").style.display = "block"
    tr1 = o.parentNode.parentNode.rowIndex
    tr1 = (tr1 + (page) * 10)
    document.getElementById("id2").value = students[tr1 - 1].id
    document.getElementById("name2").value = students[tr1 - 1].name
    document.getElementById("academy2").value = students[tr1 - 1].academy
    document.getElementById("major2").value = students[tr1 - 1].major
    document.getElementById("grade2").value = students[tr1 - 1].grade
    document.getElementById("class2").value = students[tr1 - 1].class
    document.getElementById("age2").value = students[tr1 - 1].age
     //把每一个文本框设置为只读
    document.getElementById("id2").setAttribute("readOnly", "ture")   
    document.getElementById("name2").setAttribute("readOnly", "true")
    document.getElementById("academy2").setAttribute("readOnly", "true")
    document.getElementById("major2").setAttribute("readOnly", "true")
    document.getElementById("grade2").setAttribute("readOnly", "true")
    document.getElementById("class2").setAttribute("readOnly", "true")
    document.getElementById("age2").setAttribute("readOnly", "true")

}

//删除框的显示
function showSureTable() {
    document.getElementById("delSureTable").style.display = "block"
}
//删除功能，点确认删除后，删除复选框被选的对象
function delSure() {
    let dels = document.getElementsByName("del1")
    for (let j = dels.length - 1; j >= 0; j--) { //*** 注意 必须以倒序进行遍历删除，具体原因请看
                                                 //我的另一篇文章    
                                                                           
        if (dels[j].checked) {      //遍历，用来判断该行对象复选框是否被选
            // delete students[j]   //删除后原位置为undefined
            let i = j + (page * 10)
            students.splice(i, 1)   //删除
            // students.remove(j)     //无效果
        }
    }
    show()
    document.getElementById("delSureTable").style.display = "none"

}

// 全选
//如果你使用的是下面这句话对复选框实现功能，并且翻页后全选功能失效
//document.querySelector("#checkAll").onclick =function allCheck()
//可以改成我使用的这种，并且在<input>里面加上οnclick="allcheck()"
function allCheck() {          
    //全选功能，如果全选的复选框被点击（被选和取消被选都属于被点击），则遍历所有复选框，使得有相同的状态
    let l = document.getElementById("checkAll")
    let c = document.getElementsByName("del1")
    for (let i = 0; i < c.length; i++) {
        c[i].checked = l.checked;
    }
}
function changeColor() {         //隔行换色,也可使用css中table tr:nth-child(even)或（odd）
                                //但我此处的表格只可使用js给予该功能，具体请看我的另一篇文章

    let table = document.getElementById("table1")
    let tr = table.rows
    console.log(tr);
    console.log(tr.length)
    for (let i = 0; i < tr.length; i++) {
        let row = tr[i]
        console.log(row);
        if (i % 2 == 0) {
            row.bgColor = "blanchedalmond";
        }
        else {
            row.bgColor = "wheat";
            //此处有一个问题，虽然上下两句话都能对颜色修改成功，
            //但是使用下面被注释的这句代码，css中对该行的hover效果则失效
            // tr[i].style.backgroundColor = "rgba(145, 156, 156, 0.3)"
            //我还没找到原因
        }
    }
    tr[0].style.backgroundColor = "burlywood"
}
function addPage() {   //下一页
    let page1 = page + 1
    if ((page1 * 10) >= students.length) {
        alert("已经是最后一页")
    } else {
        page += 1
        console.log(111);
        show()      //
    }
    showPageNum()    //增加完页数后重新输出页码
}
function reducePage() {  //上一页
    if (page == 0) {
        alert("已经第一页")
    } else {
        page -= 1
        show()
    }
    showPageNum()
}
//显示当前页码和总共页数
function showPageNum() {
    let totalPage =0 
    if(students.length%10!=0){    //判断对象的数量是否刚好为10的倍数，因为按照
                                  //这个代码逻辑，此时页数会多1
        totalPage =parseInt(students.length/10)+1
    }
    else{
        totalPage =students.length/10
    }
    document.getElementById("pageNum").innerHTML = "第" + (page + 1) + "页" + "<共" + totalPage +"页>"
}
//作者：新手-楷

HTML代码

<!--作者：-楷->
<html>

<head>
    <link rel="stylesheet" type="text/css" href="student.css">
    <h2 style="text-align: center; margin-top: 50px; ">
        学生信息管理系统
    </h2>
</head>

<body>

    <div id="bg1">
        <table id="table1">
           <thead>
            
           </thead>
        </table>
    </div>
    <div id="add_button">
        <!-- 增加按钮，点击时执行showAddTable方法，把增加面板展示出来 -->
        <button type="button" onclick="showAddTable()">增加</button> 
        <button type="button" onclick="showSureTable()">删除</button>
    </div>
    <!-- 增加窗口 -->
    <div id="addTable">
        <div style="background-color: rgb(79, 70, 70); margin-top: -20 ;height: 50; ">
            <h3 style="color: white;line-height:2.5 ; ">修改学生信息</h3>
        </div>
        <br>

        <label for="id">学号:</label>
        <!-- placeholder的作用是在输入框内显示，但不影响输入框中的数据 -->
        <input type="text" id="id" name="id" placeholder="(id应为11位数)"><br><br>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" placeholder="(名字不能为空)"><br><br>
        <label for="name">学院:</label>
        <input type="text" id="academy" name="academy" placeholder="(学院名不能为空)"><br><br>
        <label for="name">专业:</label>
        <input type="text" id="major" name="major" placeholder="(专业名不能为空)"><br><br>
        <label for="name">年级:</label>
        <input type="text" id="grade" name="grade" placeholder="(2000级到2022级)"><br><br>
        <label for="name">班级:</label>
        <input type="text" id="class" name="class" placeholder="(班级名不大于10)"><br><br>
        <label for="name">年龄:</label>
        <input type="text" id="age" name="age"><br><br>


        <div class="button">
            <button type="button" onclick="sure()">提交</button>
            <button type="button" onclick="no()">取消</button>
        </div>

    </div>

    </div>
    <!-- 修改窗口 -->
    <div id="reviseTable">
        <div style="background-color: rgb(79, 70, 70); margin-top: -20 ;height: 50; ">
            <h3 style="color: white;line-height:2.5 ; ">修改学生信息</h3>
        </div>
        <br>
        <div>
            <!-- 修改窗口的每一个输入框，附上id -->
            <label for="id">学号:</label>
            <input type="text" id="id1" name="id1"><br><br>
            <label for="name">姓名:</label>
            <input type="text" id="name1" name="name1"><br><br>
            <label for="name">学院:</label>
            <input type="text" id="academy1" name="academy1"><br><br>
            <label for="name">专业:</label>
            <input type="text" id="major1" name="major1"><br><br>
            <label for="name">年级:</label>
            <input type="text" id="grade1" name="grade1"><br><br>
            <label for="name">班级:</label>
            <input type="text" id="class1" name="class1"><br><br>
            <label for="name">年龄:</label>
            <input type="text" id="age1" name="age1"><br><br>
        </div>
        <div class="button">
            <button type="button" onclick="sure1()">确定</button>
            <button type="button" onclick="no1()">取消</button>
        </div>
    </div>


    <div id="readTable">
        <div style="background-color: rgb(79, 70, 70); margin-top: -20 ;height: 50; ">
            <h3 style="color: white;line-height:2.5 ; ">查看学生信息</h3>
        </div>
        <br>
        <div>
            <label for="id">学号:</label>
            <input type="text" id="id2" name="id2"><br><br>
            <label for="name">姓名:</label>
            <input type="text" id="name2" name="name2"><br><br>
            <label for="name">学院:</label>
            <input type="text" id="academy2" name="academy2"><br><br>
            <label for="name">专业:</label>
            <input type="text" id="major2" name="major2"><br><br>
            <label for="name">年级:</label>
            <input type="text" id="grade2" name="grade2"><br><br>
            <label for="name">班级:</label>
            <input type="text" id="class2" name="class2"><br><br>
            <label for="name">年龄:</label>
            <input type="text" id="age2" name="age2"><br><br>
        </div>
        <div class="button">
            
            <button type="button" onclick="no2()">关闭</button>
        </div>
    </div>

    <div id="delSureTable">
        <h3>确定删除此数据吗？</h3>
        <button type="button" onclick="delSure()">确定</button>
        <button type="button" onclick="no3()">取消</button>
    </div>


    <div id="page"">
        <button type=" button" onclick="reducePage()">上一页</button>
        <a id="pageNum"></a>
        <button type="button" onclick="addPage()">下一页</button>
    </div>




    <script src="student.js" language="javascript" type="text/javascript"></script>
</body>

</html>
<!--作者：-楷->

css总代码

/* -楷 */
body {
    background-color: bisque;
}

#bg1 {

    top: 50%;
    width: 800;
    height: 500;
    position: absolute;
    margin-left: 160px;
    margin-top: -200px;
}

#table1 {
    text-align: center;
    font-size: 23;
    width: 1100px;
    font-family:'Times New Roman', Times, serif;
    border-collapse: collapse;
}
#table1 tr:hover{  
    background-color:darkgrey;
}

#addTable {
    width: 500px;
    height: 450px;
    left: 50%;
    top: 10%;
    margin-top: 100px;
    margin-left: -250px;
    position: absolute;
    background-color: white;
    text-align: center;
    display: none;
}

#reviseTable {
    width: 500px;
    height: 450px;
    left: 50%;
    top: 40%;
    margin-top: -150px;
    margin-left: -300px;
    position: absolute;
    background-color:aliceblue;
    text-align:  center;
    display: none;
}

#readTable {
    width: 500px;
    height: 450px;
    left: 50%;
    top: 40%;
    margin-top: -100px;
    margin-left: -250px;
    position: absolute;
    background-color: rgb(68, 167, 157);
    text-align: center;
    display: none;

}

#delSureTable {
    display: none;
    width: 300px;
    height: 140px;
    left: 40%;
    border:3px solid #000;
    background-color: aquamarine;
    position: absolute;
    text-align: center;
    opacity: 0.9;
    

}
/* table tr:nth-child(even) {    
    background-color: aqua;
}
table tr:nth-child(odd) {
    background-color: rgb(24, 108, 70);
} */

#page{
    width: 260px;
    margin-left: 1000px;
    margin-top: 470px;
}
#add_button{

    margin-left: 160px;
}
#addline{
    position: absolute;
    left: 100px;
    text-align: center;
}
.button{
    text-align: right;
    position:absolute;
    margin-top: 40px;
    background-color: darkorange;
    width: 500px;
    height: 50px;
    line-height: 50px;
}


纯原生js。

# 二、各部分功能展示
（主要针对js的功能块）
## 增加功能
![请添加图片描述](https://img-blog.csdnimg.cn/454c48ce456f48758553828f166f792e.gif)

## 修改功能

![请添加图片描述](https://img-blog.csdnimg.cn/a20dd6069f5146ab987ab8b26584ac92.gif)

## 查看功能
![请添加图片描述](https://img-blog.csdnimg.cn/deef927ff88948e4985eacd10684cc6a.gif)

## 删除功能
![请添加图片描述](https://img-blog.csdnimg.cn/aac8a1b62292461f93e344c8abb0f756.gif)

## 全选功能
![请添加图片描述](https://img-blog.csdnimg.cn/22a75dee1d574544a01de4a03fb6b976.gif)

## 翻页
![请添加图片描述](https://img-blog.csdnimg.cn/6835d76aaa1c413b9ebd7faab171aaac.gif)

# 三、注意
## 1.![在这里插入图片描述](https://img-blog.csdnimg.cn/5134bc8ea19e48c58f132470483862fc.png)
## 2.
![在这里插入图片描述](https://img-blog.csdnimg.cn/e530851c29574c76a9201b4dbb63dcd9.png)

## 3. 
（此问题我还没找到原因，求大佬指教）![此问题我还不知原因](https://img-blog.csdnimg.cn/f7db8a60d7304175ab8312d574838730.png)
## 4.
![在这里插入图片描述](https://img-blog.csdnimg.cn/e2680ed991254cccb3a7a06c72520a0e.png)
文章仅供参考。
<楷>