请求实现HTML学生ID与成绩录入表单（含JavaScript校验功能）

以下是满足需求的完整实现代码，包含表单、校验、等级转换及记录展示功能：

完整代码实现 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生成绩管理</title>
    <style>
        /* 等级颜色样式 */
        .grade-A { color: green; }
        .grade-B { color: blue; }
        .grade-C { color: orange; }
        .grade-D { color: red; }
        form { margin: 20px 0; }
        input { margin-right: 10px; padding: 5px; }
        table { border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ccc; padding: 8px 12px; }
    </style>
</head>
<body>
    <h2>学生成绩录入</h2>
    <form id="scoreForm">
        <label>学生ID：</label>
        <input type="text" id="studentId" placeholder="请输入学生ID" required>
        <label>成绩：</label>
        <input type="number" id="score" placeholder="0-100" required>
        <button type="button" id="submitBtn">提交成绩</button>
    </form>

    <h3>成绩记录</h3>
    <table id="recordTable">
        <thead>
            <tr>
                <th>学生ID</th>
                <th>原始成绩</th>
                <th>等级</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        // 获取DOM元素
        const submitBtn = document.getElementById('submitBtn');
        const studentIdInput = document.getElementById('studentId');
        const scoreInput = document.getElementById('score');
        const tableBody = document.querySelector('#recordTable tbody');

        // 绑定提交按钮点击事件
        submitBtn.addEventListener('click', function() {
            const studentId = studentIdInput.value.trim();
            const score = parseFloat(scoreInput.value);

            // 校验成绩有效性
            if (isNaN(score) || score < 0 || score > 100) {
                alert('请输入有效的成绩（0-100之间的数字）');
                return;
            }
            if (!studentId) {
                alert('请输入学生ID');
                return;
            }

            // 转换成绩为等级并匹配样式类
            let grade, gradeClass;
            if (score >= 90) {
                grade = 'A';
                gradeClass = 'grade-A';
            } else if (score >= 85) {
                grade = 'A-';
                gradeClass = 'grade-A';
            } else if (score >= 80) {
                grade = 'B+';
                gradeClass = 'grade-B';
            } else if (score >= 75) {
                grade = 'B';
                gradeClass = 'grade-B';
            } else if (score >= 70) {
                grade = 'B-';
                gradeClass = 'grade-B';
            } else if (score >= 65) {
                grade = 'C+';
                gradeClass = 'grade-C';
            } else if (score >= 60) {
                grade = 'C';
                gradeClass = 'grade-C';
            } else if (score >= 50) {
                grade = 'D';
                gradeClass = 'grade-D';
            } else {
                grade = 'E';
                gradeClass = 'grade-D';
            }

            // 新增记录行到表格
            const newRow = document.createElement('tr');
            newRow.innerHTML = `
                <td>${studentId}</td>
                <td>${score}</td>
                <td class="${gradeClass}">${grade}</td>
            `;
            tableBody.appendChild(newRow);

            // 清空输入框
            studentIdInput.value = '';
            scoreInput.value = '';
        });
    </script>
</body>
</html>

关键功能说明 #

• 表单校验：点击提交后先验证成绩是否为0-100的有效数字、学生ID是否为空，无效则弹出提示
• 等级转换：按分数区间映射对应等级，同时绑定预设的颜色样式类
• 记录展示：有效提交后自动在表格新增一行，等级文本按规则显示对应颜色
• 输入重置：提交成功后清空输入框，便于下一次录入

内容的提问来源于stack exchange，提问作者napisss