首先是HTML

                    学生管理系统        
学生成绩管理系统
                        查看            删除                        新增                 修改                        导入                                    排序              班级平均分                              ALL                                  理科1班                  理科2班                                                  文科1班                  文科2班                                                                                          

学号

姓名

班级

英语

语文

数学

总分

操作

提示

X

学号:

姓名:

班级:

理科1班 理科2班 文科1班 文科2班

英语:

语文:

数学:

确定

提示

X

学号

姓名

班级

英语

语文

数学

总分

提示

X

选择修改内容

英语 语文 数学 班级 理科1班 理科2班 文科1班 文科2班 确定

提示

X

数学 语文 英语 总分

提示

X

平均分

而后是css

body{    height: 500px;}h1{display: flex;justify-content: center;color: rgb(60, 60, 60);}.tablebox{position: relative;z-index: 100;border: 1px solid rgb(238,238,238);width: 100%;height: 34rem;background-color: rgb(250,250,250);}.tablbox{    display: flex;    /* height: 500px; */    overflow: auto;}.table-container {width: 100%;height: 480px; /* 设置固定高度 */overflow-y: auto; /* 启用垂直滚动条 */margin: 10px 20px 0 0; /* 添加一些间距，使得两个表格之间有空隙 */}.table-container table {width: 100%; /* 表格宽度为容器宽度 */}.table-container::-webkit-scrollbar {width: 0px;}table{z-index: 9; width: 100%;margin-right: 10px;border-collapse: collapse;}table,table tr th, table tr td { z-index: 5;color: rgb(102, 102, 102);border:1px solid rgb(238,238,238); }.chakan{cursor: pointer;border-radius: 2px;width: 50px;height: 35px;color: rgb(255, 255, 255);border: none;background-color: rgb(46,185,170);box-shadow: 1.5px 1.5px 0 0 rgb(46, 185, 171, 0.445) ;}.chakan:active{box-shadow: 0 0 0 0 rgba(255, 255 255, 0);transition: all 0.1s;}.chakan1{cursor: pointer;border-radius: 2px;width: 50px;height: 35px;margin-left: 10px;color: rgb(255, 255, 255);border: none;background-color: rgb(46,185,170);}.chakan2{    cursor: pointer;    border-radius: 2px;    width: 120px;    height: 35px;    margin-left: 10px;    color: rgb(255, 255, 255);    border: none;    background-color: rgb(46,185,170);    }#qiehuan{width: 70px;height: 35px;color: rgb(102, 102, 102);}.bubox{margin: 5px 5px 5px 5px;}.bubox input{border: none;border-radius: 5px;height: 30px;width: 90px;}.fu{cursor: pointer;border-radius: 2px;width: 50px;height: 35px;color: rgb(102, 102, 102);border: none;background-color: white;border: 1px solid rgb(238,238,238);box-shadow: 1.5px 1.5px 0 0 rgba(102, 102, 102, 0.445);}.fu:active{    box-shadow:0 0 0 0 rgba(255, 255, 255, 0);    transition: all 0.1s;}.fu1{font-size: 15px;padding: 5px 5px 5px 5px;cursor: pointer;border-radius: 2px;width: 50px;height: 35px;color: rgb(102, 102, 102);border: none;background-color: white;border: 1px solid rgb(238,238,238);box-shadow: 1.5px 1.5px 0 0 rgba(102, 102, 102, 0.445);}.fu1:active{    box-shadow:0 0 0 0 rgba(255, 255, 255, 0);    transition: all 0.1s;}.alert{opacity: 0;position: relative;z-index: -1;border-radius: 15px;margin: -385px auto;border: 1px solid rgb(238,238,238);width: 30%;background-color: rgb(250,250,250);transition: opacity 0.3s ease-in-out;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);text-align: center;}.alert1{opacity: 0;position: relative;z-index: -999;border-radius: 15px;margin: -385px auto;border: 1px solid rgb(238,238,238);width: 30%;background-color: rgb(250,250,250);transition: opacity 0.3s ease-in-out;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);text-align: center;}.alert2{opacity: 0;position: relative;z-index: -999;border-radius: 15px;margin: 385px auto;border: 1px solid rgb(238,238,238);width: 20%;background-color: rgb(250,250,250);transition: opacity 0.3s ease-in-out;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);text-align: center;}#tablebox1 tr:nth-child(odd) {background-color: #f2f2f2; /* 设置奇数行的背景颜色 */}#tablebox3 tr:nth-child(odd) {background-color: #f2f2f2; /* 设置奇数行的背景颜色 */}.alert3{    top: 10px;opacity: 0;position: absolute;z-index: -999;border-radius: 15px;left: 40rem;top: 15rem;right: 0;border: 1px solid rgb(238,238,238);width: 20%;background-color: rgb(250,250,250);transition: opacity 0.3s ease-in-out;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);text-align: center;}.notword{    color: red;}.alert4{    top: 10px;opacity: 0;position: absolute;z-index: -999;border-radius: 15px;left: 40rem;top: 15rem;right: 0;border: 1px solid rgb(238,238,238);width: 20%;background-color: rgb(250,250,250);transition: opacity 0.3s ease-in-out;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);text-align: center;}.alert p{margin-top: 10px;margin-bottom: 10px;display: flex;justify-content: center;}.alert1 p{margin-top: 10px;margin-bottom: 10px;display: flex;justify-content: center;}.alert2 p{margin-top: 10px;margin-bottom: 10px;display: flex;justify-content: center;}.alert3 .nar{margin-top: 10px;margin-bottom: 10px;display: flex;justify-content: center;}.alert4 .nar{    margin-top: 10px;    margin-bottom: 10px;    display: flex;    justify-content: center;    }.alert3 .pai{flex-direction: column; /* 让子元素垂直排列 */display: flex;justify-content: center;}.alert3 .pai button{text-align: center;display: block;margin: 0 auto;cursor: pointer;border-radius: 2px;margin-bottom: 5px;width: 50px;height: 25px;color: rgb(255, 255, 255);border: none;background-color: rgb(46,185,170);}.alert input{border:1px solid rgb(228,226,226);margin-top: 10px;height: 35px;}.alert select{border:1px solid rgb(228, 226, 226);margin-top: 10px;width: 173px;height: 35px;}.alert2 select{border:1px solid rgb(228, 226, 226);margin-top: 10px;width: 100px;height: 35px;}.alert2 input{border:1px solid rgb(228, 226, 226);width: 100px;height: 35px;}.alert .nar p{margin-left: 100px;margin-right: 60px;}.alert1 .nar p{margin-left: 100px;margin-right: 60px;}.alert2 .nar p{margin-left: 100px;margin-right: 60px;}.alert3 .nar p{margin-left: 100px;margin-right: 60px;}.alert4 .nar p{    margin-left: 100px;    margin-right: 60px;    }.alert button{text-align: center;display: block;margin: 0 auto;cursor: pointer;border-radius: 2px;margin-bottom: 5px;width: 50px;height: 25px;color: rgb(255, 255, 255);border: none;background-color: rgb(46,185,170);}.alert2 button{text-align: center;display: block;margin: 0 auto;cursor: pointer;border-radius: 2px;margin-bottom: 5px;width: 50px;height: 25px;color: rgb(255, 255, 255);border: none;background-color: rgb(46,185,170);}td{text-align: center;}tr:hover{background-color: rgb(190, 190, 190);}

接下来是js

比较多 首先是基本功能的js

function quexiao(){    document.getElementById("alert").style.opacity = 0;    setTimeout(()=>{    document.getElementById("alert").style.zIndex = -999;}, 300)}function quexiao1(){    document.getElementById("alert1").style.opacity = 0;    setTimeout(()=>{    document.getElementById("alert1").style.zIndex = -999;}, 300);}function quexiao4(){    document.getElementById("alert4").style.opacity = 0;    setTimeout(()=>{    document.getElementById("alert4").style.zIndex = -999;}, 300);}function quexiao3(){    document.getElementById("alert3").style.opacity = 0;    setTimeout(()=>{    document.getElementById("alert3").style.zIndex = -999;}, 300);}function xian(){    document.getElementById("alert").style.opacity = 1;    document.getElementById("alert").style.zIndex =999;}var studentsss = JSON.parse(localStorage.getItem('studentsssData1')) || [];console.log(studentsss)function Studnt() {    // Retrieve input values    var id = document.getElementById("id").value;    var name = document.getElementById("name").value;    var classes = document.getElementById("classes").value;    var Eng = document.getElementById("Eng").value;    var Ch = document.getElementById("Ch").value;    var math = document.getElementById("math").value;    if (Eng  150 || Ch  150 || math  150) {        alert("请输入有效的成绩，成绩应该在0到150之间");        return;      }      if (isNaN(id)) {        alert("请输入有效的学号");        return;      }      if (!isNaN(name)) {        alert("请输入有效的姓名");        return;      }    if (id === '' || name === '' || classes === '' || Eng === '' || Ch === '' || math === '') {        alert("请输入完整信息");        return;    }        var isDuplicate = studentsss.some(function(student) {        return student.id === id;    });    if (isDuplicate) {        alert("已存在相同学号的学生，请输入其他学号");        return;    }    var student = {        id: id,        name: name,        classes: classes,        Eng: Eng,        Ch: Ch,        math: math    };    studentsss.push(student);    localStorage.setItem('studentsssData1', JSON.stringify(studentsss));    renderTable(studentsss);}    function cha(){        var id = document.getElementById("wordid").value;        var found = studentsss.find(function(student) {            return student.id === id;        });    if (found) {        document.getElementById("alert1").style.opacity = 1;        document.getElementById("alert1").style.zIndex = 999;        var table = document.getElementById('tablebox2');        var headerRow = table.rows[0];        while (table.rows.length > 1) {            table.deleteRow(1);        }            var totalScore = parseInt(found.Eng) + parseInt(found.Ch) + parseInt(found.math);            var newRow = table.insertRow(-1);            var cellId = newRow.insertCell(0);            var cellName = newRow.insertCell(1);            var cellClass = newRow.insertCell(2);            var cellEng = newRow.insertCell(3);            var cellCh = newRow.insertCell(4);            var cellMath = newRow.insertCell(5);            var cellTotalScore = newRow.insertCell(6);                  cellId.innerHTML = found.id;            cellName.innerHTML = found.name;            cellClass.innerHTML = found.classes;            cellEng.innerHTML = found.Eng;            cellCh.innerHTML = found.Ch;            cellMath.innerHTML = found.math;            cellTotalScore.innerHTML = totalScore;               } else {        alert("暂无匹配的学生信息");    }    }    function del(){        var id = document.getElementById("wordid").value;        var found = studentsss.find(function(student) {            return student.id == id;        });            if (found) {            var index = studentsss.findIndex(function(student) {                return student.id == found.id;            });            if (index > -1) {                studentsss.splice(index, 1);                localStorage.setItem('studentsssData1', JSON.stringify(studentsss)); // 更新本地存储中的数据                renderTable(studentsss);             }        } else {            alert("请输入有效的学号");        }    }function xiugai(){    document.getElementById('popopo').innerHTML=`确定`;    document.getElementById("alert2").style.opacity = 1;    document.getElementById("alert2").style.zIndex =999;   }function Stuxiu() {    var promm = document.getElementById("promm").value;    var id = document.getElementById("ssids").value;    var pro = document.getElementById("pros").value;    var classSelect =  document.getElementById("classSelect").value    var found = false;    console.log(pro)    console.log(classSelect)    for (let l = 0; l {            console.log(item);            studentsss.push(item);        });                localStorage.setItem('studentsssData1', JSON.stringify(studentsss)); // 将studentsss数组转为JSON字符串并存储到本地缓存中        renderTable(studentsss); // 调用renderTable函数渲染表格    };        // 以ArrayBuffer的形式读取文件内容    reader.readAsArrayBuffer(this.files[0]);        renderTable(studentsss); // 调用renderTable函数渲染表格}, false);window.onload = function() {    var storedData = localStorage.getItem('studentsssData1');    if (storedData) {        var studentsss = JSON.parse(storedData);        studentsss.sort(function(a, b) {            return a.id - b.id; // 按学号从小到大排序        });        renderTable(studentsss);    }}

计算平均成绩的js

document.getElementById("avg").addEventListener('click',function(){    var allm1=[];    var allm2=[];    var allw1=[];    var allw2=[];    document.getElementById("alert4").style.opacity = 1;        document.getElementById("alert4").style.zIndex = 999;        const math1 = studentsss.filter(function(student){        return student.classes === "理科1班";    });        const math2 = studentsss.filter(function(student){        return student.classes === "理科2班";    });        const word1 = studentsss.filter(function(student){        return student.classes === "文科1班";    });        const word2 = studentsss.filter(function(student){        return student.classes === "文科2班";    });    math1.forEach(item=>{        allm1.push(parseInt(item.Eng) + parseInt(item.Ch) + parseInt(item.math))    })    math2.forEach(item=>{        allm2.push(parseInt(item.Eng) + parseInt(item.Ch) + parseInt(item.math))    })    word1.forEach(item=>{        allw1.push(parseInt(item.Eng) + parseInt(item.Ch) + parseInt(item.math))    })    word2.forEach(item=>{        allw2.push(parseInt(item.Eng) + parseInt(item.Ch) + parseInt(item.math))    })    var sum = 0;    var sum1 = 0;    var sum2 = 0;    var sum3 = 0;    var cumulativeSum = [];    var cumulativeSum1 = [];    var cumulativeSum2 = [];    var cumulativeSum3 = [];    for (let i = 0; i  
排序的js
 
document.getElementById('pai').addEventListener('click', function () {    document.getElementById("alert3").style.opacity = 1;    document.getElementById("alert3").style.zIndex = 999;    var selectedClass = document.getElementById('qiehuan').value;    var filteredStudents = studentsss.filter(function (student) {        return selectedClass === 'all' ||  student.classes === selectedClass;    }); });document.getElementById('math1').addEventListener('click', function () {    sortAndRender('math');});document.getElementById('ch').addEventListener('click', function () {    sortAndRender('Ch');});document.getElementById('En').addEventListener('click', function () {    sortAndRender('Eng');});document.getElementById('all').addEventListener('click', function () {    sortAndRender('totalScore'); // Assuming 'all' means sorting by total score});function sortAndRender(sortKey) {    var selectedClass = document.getElementById('qiehuan').value;    var filteredStudents = studentsss.filter(function (student) {        return selectedClass === 'all' || student.classes === selectedClass;    });    if (sortKey === 'totalScore') {        filteredStudents.sort(function (a, b) {            return (                parseInt(b.Eng) + parseInt(b.Ch) + parseInt(b.math) -                (parseInt(a.Eng) + parseInt(a.Ch) + parseInt(a.math))            );        });    } else {        filteredStudents.sort(function (a, b) {            return parseInt(b[sortKey]) - parseInt(a[sortKey]);        });    }    renderTable(filteredStudents);}
 
表格操作里的js
 
var priid;function prite(button){    console.log("我被删除")    const rowIndex = button.closest("tr").rowIndex;  studentsss.forEach((item,index) => {     if(rowIndex===index+1)     {        studarr=item        console.log(studarr)     }  });    if (studarr) {    var index = studentsss.findIndex(function(student) {        return student.id == studarr.id;    });    if (index > -1) {        studentsss.splice(index, 1);        localStorage.setItem('studentsssData1', JSON.stringify(studentsss)); // 更新本地存储中的数据        renderTable(studentsss);     }} else {    alert("请输入有效的学号");}}function prixiu(button) {    document.getElementById("alert2").style.opacity = 1;    document.getElementById("alert2").style.zIndex =999;        var studarr;    console.log("我被修改");  const rowIndex = button.closest("tr").rowIndex;  studentsss.forEach((item,index) => {     if(rowIndex===index+1)     {        studarr=item        console.log(studarr)     }  });   priid = studarr.id;  document.getElementById("lcclc").innerHTML = "学号"+studarr.id document.getElementById('popopo').innerHTML=`确定`;  }  function newStuxiu() {    var promm = document.getElementById("promm").value;    var pro = document.getElementById("pros").value;    var classSelect =  document.getElementById("classSelect").value    var found = false;    console.log(pro)    console.log(classSelect)    for (let l = 0; l  
切换的js
 
document.getElementById('qiehuan').addEventListener('change', function () {    updateTableBasedOnClass();});function updateTableBasedOnClass() {    var selectedClass = document.getElementById('qiehuan').value;    var filteredStudents = studentsss.filter(function (student) {        return selectedClass === 'all' || student.classes === selectedClass;    });    while (combinedTable.rows.length > 1) {        combinedTable.deleteRow(1);    }    console.log(selectedClass)    renderTable(filteredStudents)}function renderTable(studentData) {    var combinedTable = document.getElementById('combinedTable');    var headerRow = combinedTable.rows[0];    while (combinedTable.rows.length > 1) {        combinedTable.deleteRow(1);    }    studentData.forEach(function (student) {        var totalScore = parseInt(student.Eng) + parseInt(student.Ch) + parseInt(student.math);        var newRow = combinedTable.insertRow(-1);        var cellId = newRow.insertCell(0);        var cellName = newRow.insertCell(1);        var cellClass = newRow.insertCell(2);        var cellEng = newRow.insertCell(3);        var cellCh = newRow.insertCell(4);        var cellMath = newRow.insertCell(5);        var cellTotalScore = newRow.insertCell(6);        var todo = newRow.insertCell(7)        cellId.innerHTML = student.id;        cellName.innerHTML = student.name;        cellClass.innerHTML = student.classes;        cellEng.innerHTML = student.Eng;        cellCh.innerHTML = student.Ch;        cellMath.innerHTML = student.math;        cellTotalScore.innerHTML = totalScore;        console.log(studentsss)        console.log(studentData)        if(studentData.length==studentsss.length){        todo.innerHTML = `删除        修改        `}else{            todo.innerHTML = `
不可操作
        `        }        studentsss.sort(function(a, b) {            return a.id - b.id; // 按学号从小到大排序        });            });}