首先是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 div{
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
.alert1 div{
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
.alert2 div{
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 < allm1.length; i++) {
        sum += allm1[i];
        cumulativeSum.push(sum);
    }
    for (let i = 0; i < allm2.length; i++) {
        sum1 += allm2[i];
        cumulativeSum1.push(sum1);
    }
    for (let i = 0; i < allw1.length; i++) {
        sum2 += allw1[i];
        cumulativeSum2.push(sum2);
    }
    for (let i = 0; i < allw2.length; i++) {
        sum3 += allw2[i];
        cumulativeSum3.push(sum3);
    }
    document.getElementById("li1").innerHTML = "理科1班" + (cumulativeSum[cumulativeSum.length - 1] / allm1.length).toFixed(2);
    document.getElementById("li2").innerHTML = "理科2班" + (cumulativeSum1[cumulativeSum1.length - 1] / allm2.length).toFixed(2);
    document.getElementById("wen1").innerHTML = "文科1班" + (cumulativeSum2[cumulativeSum2.length - 1] / allw1.length).toFixed(2);
    document.getElementById("wen2").innerHTML = "文科2班" + (cumulativeSum3[cumulativeSum3.length - 1] / allw2.length).toFixed(2);
},false)

排序的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 < studentsss.length; l++) {
        if (priid == studentsss[l].id) {
            if (pro === "classes") {
              studentsss[l].classes = classSelect;
                found = true;
                break;
            } else if (pro === "Eng") {
                studentsss[l].Eng=promm ;
                found = true;
                break;
            } else if (pro === "Ch") {
                 studentsss[l].Ch = promm ;
                found = true;
                break;
            } else if (pro === "math") {
                studentsss[l].math = promm ;
                found = true;
                break;
            }
        }
    }

    if (!found) {
        alert("请输入有效的学生学号和科目");
    }
    console.log(studentsss)
    localStorage.setItem('studentsssData1', JSON.stringify(studentsss)); // 更新本地存储中的数据
}

切换的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; // 按学号从小到大排序
        });
        
    });
}