前端HTML+JS+CSS 简单的学生成绩管理系统
首先是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
排序的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; // 按学号从小到大排序
});
});
}
免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理!
部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!
图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
