使用jQuery实现学生期末成绩录入

使用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>