前端HTML+JS+CSS 简单的学生成绩管理系统

首先是HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <h1>学生成绩管理系统</h1>
    <div class="tablebox">
        <div class="bubox">
            <button class="chakan" onclick="cha(this)">查看</button>
            <button class="chakan" onclick="del(this)">删除</button>
            <input type="text" placeholder="请输入学号" id="wordid">
            <button class="fu" onclick="xian(this)">新增</button>
     
            <button class="fu" onclick="xiugai(this)">修改</button>
            <input type="file" id="import" style="display: none;">
            <label for="import" class="fu1">导入
            </label>    
        
            <button class="chakan1" id="pai">排序</button>  
            <button class="chakan2" id="avg">班级平均分</button>  
            <select name="" id="qiehuan">
                <option value="all">ALL</option>
                <optgroup label="理科班级">
                  <option value="理科1班">理科1班</option>
                  <option value="理科2班">理科2班</option>
                </optgroup>
                <optgroup label="文科班级">
                  <option value="文科1班">文科1班</option>
                  <option value="文科2班">文科2班</option>
                </optgroup>
              </select>
              
      
        </div>
        <div class="tablbox">
            <div class="table-container">
            <table id="combinedTable">
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>班级</td>
                    <td>英语</td>
                    <td>语文</td>
                    <td>数学</td>
                    <td>总分</td>
                    <td style="width: 150px;">操作</td>
                </tr>
            </table>
        </div>  
        </div>
        
    </div>
    <div class="alert" id="alert"> 
        <div class="nar">
            <p>提示</p>
            <p style="cursor: pointer;" onclick="quexiao(this)">X</p>
        </div>
        <div>
            <p>学号:</p>
            <input type="text" placeholder="请输入学号" id="id">
        </div>

        <div>
            <p>姓名:</p>
            <input type="text" placeholder="请输入姓名" id="name">
        </div>

        <div>
            <p>班级:</p>
            <select name="" id="classes">
                <option value="理科1班">理科1班</option>
                <option value="理科2班">理科2班</option>
                <option value="文科1班">文科1班</option>
                <option value="文科2班">文科2班</option>
            </select>
        </div>

        <div>
            <p>英语:</p>
            <input type="text" placeholder="请输入英语" id="Eng">
        </div>

        <div>
            <p>语文:</p>
            <input type="text" placeholder="请输入语文" id="Ch">
        </div>

        <div>
            <p>数学:</p>
            <input type="text" placeholder="请输入数学" id="math">
        </div>
        <button onclick="Studnt(this)">确定</button>
    </div>
            

    <div class="alert1" id="alert1"> 
        <div class="nar">
            <p>提示</p>
            <p style="cursor: pointer;" onclick="quexiao1(this)">X</p>
        </div>
        <div class="tablbox">
       
        <table id="tablebox2">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>班级</td>
                <td>英语</td>
                <td>语文</td>
                <td>数学</td>
                <td>总分</td>
            </tr>
        </table>
        </div>

    </div>

    <div class="alert2" id="alert2"> 
        <div class="nar">
            <p>提示</p>
            <p style="cursor: pointer;" onclick="quexiao2(this)">X</p>
        </div>
        <div id="lcclc"> 
            <input type="text" name="" id="ssids" placeholder="输入学号">
        </div>
        <div>
            <p>选择修改内容</p>
            <select name="" id="pros">
               
                <option value="Eng">英语</option>
                <option value="Ch">语文</option>
                <option value="math">数学</option>
                <option value="classes">班级</option>
               </select>
        </div>
        <div id="inputContainer">
            <input type="text" id="promm" placeholder="输入修改内容">
            <select id="classSelect" style="display: none;">
                <option value="理科1班">理科1班</option>
                <option value="理科2班">理科2班</option>
                <option value="文科1班">文科1班</option>
                <option value="文科2班">文科2班</option>
            </select>
        </div>
        <div id="popopo">
        <button onclick="Stuxiu(this)">确定</button>
    </div>
    </div>

    <div class="alert3" id="alert3"> 
        <div class="nar">
            <p>提示</p>
            <p style="cursor: pointer;" onclick="quexiao3(this)">X</p>
        </div>
      <div class="pai">
        <button id="math1">数学</button>
        <button id="ch">语文</button>
        <button id="En">英语</button>
        <button id="all">总分</button>
      </div>
    </div>

    <div class="alert4" id="alert4"> 
        <div class="nar">
            <p>提示</p>
            <p style="cursor: pointer;" onclick="quexiao4(this)">X</p>
        </div>
      <h2>平均分</h2>
      <div id="li1"></div>
      <div id="li2"></div>
      <div id="wen1"></div>
      <div id="wen2"></div>
    </div>
</body>

</html>
<script src="main.js"></script>
<script src="ma.js"></script>
<script src="paixu.js"></script>
<script src="qiehuan.js"></script>
<script src="pri.js"></script>
<script src="cum.js"></script>

而后是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 < 0 || Eng > 150 || Ch < 0 || Ch > 150 || math < 0 || 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=`<button onclick="Stuxiu(this)">确定</button>`;
    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 < studentsss.length; l++) {
        if (id == 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)); // 更新本地存储中的数据
}

function quexiao2(){
    document.getElementById("alert2").style.opacity = 0;
    document.getElementById("alert2").style.zIndex = -999;
}

document.getElementById('import').addEventListener('change', function(e) {
    var reader = new FileReader(); // 创建一个FileReader对象

    // 当文件加载完成后触发的回调函数
    reader.onload = function(e) {
        var data = new Uint8Array(e.target.result); // 将文件内容转为Uint8Array类型
        var workbook = XLSX.read(data, {type: 'array'}); // 使用xlsx库解析Excel文件

        var result = [];
        
        // 遍历每个工作表
        workbook.SheetNames.forEach(function(sheetName) {
            var roa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {header:"学号"}); // 将工作表转为JSON数据
            if(roa.length) result = result.concat(roa); // 将每个工作表的数据合并到result数组中
        });

        // 将每一条数据添加到studentsss数组中，并存储到本地缓存中
        result.forEach(item=>{
            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=`<button onclick="newStuxiu(this)">确定</button>`;
  }

  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 = `<button class="chakan" onclick="prite(this)">删除</button>
        <button class="fu" onclick="prixiu(this)">修改</button>
        `}else{
            todo.innerHTML = `<p>不可操作</p>
        `
        }
        studentsss.sort(function(a, b) {
            return a.id - b.id; // 按学号从小到大排序
        });
        
    });
}

标签：前端 html javascript

本文转载自: https://blog.csdn.net/Sreat/article/details/134526971
版权归原作者 李超22302030413 所有，如有侵权，请联系我们删除。

前端HTML+JS+CSS 简单的学生成绩管理系统

发表评论

“前端HTML+JS+CSS 简单的学生成绩管理系统”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航