使用jQuery实现学生期末成绩录入
在学校的教务系统中,教师可以在期末考试评卷完成后,录入学生的期末成绩。
我们使用jQuery可以很容易地实现这一效果,如下图所示:
这个系统有以下特点:
- 录入界面是根据JSON数据自动生成的。
- 总成绩不能录入,它是根据平时成绩和期末成绩自动计算的。
- 如果录入的成绩无效,在录入框上会出现红色警告,并持续显示三秒。
一、界面生成
界面生成部分的代码如下:
// 学生数据,实际应用中,可以利用AJAX请求此数据
var students = [
{ no: '10220418101', name: '邬淑君', score1: 0, score2: 0, score3: 0 },
{ no: '10220418102', name: '萧甜', score1: 0, score2: 0, score3: 0 },
{ no: '10220418103', name: '姜杨', score1: 0, score2: 0, score3: 0 },
{ no: '10220418104', name: '潘文杰', score1: 0, score2: 0, score3: 0 },
{ no: '10220418105', name: '李晨涵', score1: 0, score2: 0, score3: 0 },
{ no: '10220418106', name: '凤若萌', score1: 0, score2: 0, score3: 0 },
{ no: '10220418107', name: '杨佳玉', score1: 0, score2: 0, score3: 0 },
{ no: '10220418108', name: '柳汝鑫', score1: 0, score2: 0, score3: 0 },
{ no: '10220418109', name: '姜晓庆', score1: 0, score2: 0, score3: 0 },
{ no: '10220418110', name: '潘晨茜', score1: 0, score2: 0, score3: 0 }
];
// 初始化,根据学生数据生成表格
function init() {
for (student of students) {
$("#scoreTable").append(`
<tr>
<td>${student.no}</td>
<td>${student.name}</td>
<td><input type="text" class="input" value="${student.score1}" onblur="calc()"></td>
<td><input type="text" class="input" value="${student.score2}" onblur="calc()"></td>
<td><input type="text" class="input" value="${student.score3}" disabled></td>
</tr>
`);
}
}
首先,学生数据定义在一个对象数组中,在实际应用时,可以通过AJAX向服务端进行请求获得。学生数据包括姓名、学号、平时成绩、期末成绩和总成绩等。
在初始化函数中,使用for...of循环,并利用了ES6的模板字符串,向表格中动态添加数据行。
二、计算总成绩
注意,在前面生成数据行时,平时成绩和期末成绩输入框的onblur事件都会调用calc()函数,它的主要功能是计算总成绩。
计算总成绩的函数代码如下:
// 根据平时成绩和期末成绩后计算总成绩
// 总成绩 = 平时成绩 * 30% + 期末成绩 * 70%
function calc() {
// 查找该行中的文本框
var inputs = $(event.target).parent().parent().find('input');
var input1 = inputs.eq(0);
var input2 = inputs.eq(1);
// 检查成绩的有效性
if (!checkNumber(input1.val())) {
input1.addClass('error');
setTimeout(function () { input1.removeClass('error') }, 3000);
return;
}
if (!checkNumber(input2.val())) {
input2.addClass('error');
setTimeout(function () { input2.removeClass('error') }, 3000);
return;
}
// 计算总成绩
inputs.eq(2).val((parseFloat(input1.val()) * 0.3 + parseFloat(input2.val()) * 0.7).toFixed(2));
}
这段代码中,首先通过jQuery的选择器,找到该行的所有input输入框。
然后,检查平时成绩和期末成绩输入框中的成绩是否有效,如果无效,则通过error样式添加一个红色警告,在三秒后移除这个样式。
最后,根据公式计算总成绩。
三、提交
当成绩录入完成时,教师可以提交录入结果。
提交时,也会进行一次成绩的有效性检查。然后,将界面上的各项成绩回写到JSON对象数组中,并通过AJAX向服务器提交此JSON数据。
代码如下:
// 提交录入结果
function saveScore() {
var inputs, input1, input2, input3;
var success = true;
$("#scoreTable tr:has('input')").each(function (index, elem) {
inputs = $(elem).find('input');
input1 = inputs.eq(0);
input2 = inputs.eq(1);
input3 = inputs.eq(2);
// 检查成绩的有效性
if (!checkNumber(input1.val())) {
input1.addClass('error');
setTimeout(function () { input1.removeClass('error') }, 3000);
success = false;
// 在each()方法中如果return false,则退出所有循环
return false;
}
if (!checkNumber(input2.val())) {
input2.addClass('error');
setTimeout(function () { input2.removeClass('error') }, 3000);
success = false;
// 在each()方法中如果return false,则退出所有循环
return false;
}
// 根据表格中的数据更新students数据
students[index].score1 = parseFloat(input1.val()).toFixed(2);
students[index].score2 = parseFloat(input2.val()).toFixed(2);
students[index].score3 = parseFloat(input3.val()).toFixed(2);
});
if (success) {
console.log(students);
// 实际应用时,将students数据上传给服务器即可
}
}
这段代码中,首先使用jQuery的选择器查找并遍历每个数据行,然后检查输入框中的成绩的有效性,如果任一输入框无效,即退出处理,在jQuery的.each()方法中只要return false即可退出循环。最后,将输入框的数据回写到JSON对象数组中。
完整的源代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>学生期末成绩录入</title>
<style>
body,
input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.error {
border: 2px solid red;
}
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
.input {
text-align: right;
}
#submit1 {
width: 100px;
height: 30px;
line-height: 30px;
margin-top: 10px;
}
.hint {
font-size: 14px;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<p class="hint">总成绩 = 平时成绩的30% + 期末成绩的70%</p>
<table id="scoreTable">
<tr>
<th>学号</th>
<th>姓名</th>
<th>平时成绩</th>
<th>期末成绩</th>
<th>总成绩</th>
</tr>
</table>
<input id="submit1" type="button" value="提交录入结果" onclick="saveScore()">
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
// 学生数据,实际应用中,可以利用AJAX请求此数据
var students = [
{ no: '10220418101', name: '邬淑君', score1: 0, score2: 0, score3: 0 },
{ no: '10220418102', name: '萧甜', score1: 0, score2: 0, score3: 0 },
{ no: '10220418103', name: '姜杨', score1: 0, score2: 0, score3: 0 },
{ no: '10220418104', name: '潘文杰', score1: 0, score2: 0, score3: 0 },
{ no: '10220418105', name: '李晨涵', score1: 0, score2: 0, score3: 0 },
{ no: '10220418106', name: '凤若萌', score1: 0, score2: 0, score3: 0 },
{ no: '10220418107', name: '杨佳玉', score1: 0, score2: 0, score3: 0 },
{ no: '10220418108', name: '柳汝鑫', score1: 0, score2: 0, score3: 0 },
{ no: '10220418109', name: '姜晓庆', score1: 0, score2: 0, score3: 0 },
{ no: '10220418110', name: '潘晨茜', score1: 0, score2: 0, score3: 0 }
];
// 初始化,根据学生数据生成表格
function init() {
for (student of students) {
$("#scoreTable").append(`
<tr>
<td>${student.no}</td>
<td>${student.name}</td>
<td><input type="text" class="input" value="${student.score1}" onblur="calc()"></td>
<td><input type="text" class="input" value="${student.score2}" onblur="calc()"></td>
<td><input type="text" class="input" value="${student.score3}" disabled></td>
</tr>
`);
}
}
// 根据平时成绩和期末成绩后计算总成绩
// 总成绩 = 平时成绩 * 30% + 期末成绩 * 70%
function calc() {
// 查找该行中的文本框
var inputs = $(event.target).parent().parent().find('input');
var input1 = inputs.eq(0);
var input2 = inputs.eq(1);
// 检查成绩的有效性
if (!checkNumber(input1.val())) {
input1.addClass('error');
setTimeout(function () { input1.removeClass('error') }, 3000);
return;
}
if (!checkNumber(input2.val())) {
input2.addClass('error');
setTimeout(function () { input2.removeClass('error') }, 3000);
return;
}
// 计算总成绩
inputs.eq(2).val((parseFloat(input1.val()) * 0.3 + parseFloat(input2.val()) * 0.7).toFixed(2));
}
// 提交录入结果
function saveScore() {
var inputs, input1, input2, input3;
var success = true;
$("#scoreTable tr:has('input')").each(function (index, elem) {
inputs = $(elem).find('input');
input1 = inputs.eq(0);
input2 = inputs.eq(1);
input3 = inputs.eq(2);
// 检查成绩的有效性
if (!checkNumber(input1.val())) {
input1.addClass('error');
setTimeout(function () { input1.removeClass('error') }, 3000);
success = false;
// 在each()方法中如果return false,则退出所有循环
return false;
}
if (!checkNumber(input2.val())) {
input2.addClass('error');
setTimeout(function () { input2.removeClass('error') }, 3000);
success = false;
// 在each()方法中如果return false,则退出所有循环
return false;
}
// 根据表格中的数据更新students数据
students[index].score1 = parseFloat(input1.val()).toFixed(2);
students[index].score2 = parseFloat(input2.val()).toFixed(2);
students[index].score3 = parseFloat(input3.val()).toFixed(2);
});
if (success) {
console.log(students);
// 实际应用时,将students数据上传给服务器即可
}
}
// 检查数字的有效性,返回true/false
// 首先它必须是一个数字
// 其次数字必须在0~100之间
function checkNumber(num) {
if (!(parseFloat(num).toString() === 'NaN') && num >= 0 && num <= 100) return true;
return false;
}
$(function () {
init();
});
</script>
</body>
</html>