增加按积分从高到低排序和按学号从小到大排序的按钮

index.html

@@ -115,6 +115,9 @@
 
         <div class="tab-pane fade" id="page2" role="tabpanel" aria-labelledby="page2-tab">
             <h1>学生名单</h1>
+            <p><button id="sortByPointsButton">按积分排序</button>
+                <button id="sortByStudentIdButton">按学号排序</button>
+            </p>
             <div id="excelDataDisplay">
                 <div style="display: flex; justify-content: space-between;">
                     <span>学号</span>

index.js

@@ -223,4 +223,41 @@ document.getElementById('addScoreButton').addEventListener('click', function ()
     } else {
         alert('输入的分数应在 0.5 到 3 之间且为有效数字。');
     }
+});
+// 按积分从高到低排序
+document.getElementById('sortByPointsButton').addEventListener('click', function () {
+    updatedData.sort((a, b) => {
+        let pointsKeyA = Object.keys(a).find(key => key.includes('积分'));
+        let pointsKeyB = Object.keys(b).find(key => key.includes('积分'));
+        return (pointsKeyB ? parseInt(b[pointsKeyB]) : 0) - (pointsKeyA ? parseInt(a[pointsKeyA]) : 0);
+    });
+    var displayDiv = document.getElementById('excelDataDisplay');
+    displayDiv.innerHTML = '<div style="display: flex; justify-content: space-between;"><span>学号</span><span>姓名</span><span>积分</span></div>';
+    updatedData.forEach(function (row) {
+        var rowDiv = document.createElement('div');
+        Object.keys(row).forEach(key => {
+            var cellDiv = document.createElement('span');
+            cellDiv.textContent = row[key] + ' ';
+            rowDiv.appendChild(cellDiv);
+        });
+        displayDiv.appendChild(rowDiv);
+    });
+});
+
+// 按学号从小到大排序
+document.getElementById('sortByStudentIdButton').addEventListener('click', function () {
+    updatedData.sort((a, b) => {
+        return a[Object.keys(a)[0]] - b[Object.keys(b)[0]];
+    });
+    var displayDiv = document.getElementById('excelDataDisplay');
+    displayDiv.innerHTML = '<div style="display: flex; justify-content: space-between;"><span>学号</span><span>姓名</span><span>积分</span></div>';
+    updatedData.forEach(function (row) {
+        var rowDiv = document.createElement('div');
+        Object.keys(row).forEach(key => {
+            var cellDiv = document.createElement('span');
+            cellDiv.textContent = row[key] + ' ';
+            rowDiv.appendChild(cellDiv);
+        });
+        displayDiv.appendChild(rowDiv);
+    });
 });