JavaScript实现HTML表格成绩关联与平均分计算教程

<div class="subjects-container">
    <!-- 每个 subject-wrapper-wrapper 代表一个科目 -->
    <div class="subject-wrapper-wrapper" data-subject-id="math" data-marks='[]'>
        <div class="subject-header">
            <h3>科目：数学</h3>
        </div>
        <div class="subject-content">
            <table>
                <thead>
                    <tr>
                        <th>成绩输入</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input class="grade-input" type="number" placeholder="输入成绩">
                        </td>
                    </tr>
                </tbody>
            </table>
            <button class="add-mark-btn">添加成绩并计算平均分</button>
        </div>
        <div class="average-display">
            <label for="mathAverage">当前平均分:</label>
            <input id="mathAverage" class="grades-average-output" type="text" placeholder="N/A" readonly>
        </div>
    </div>

    <!-- 可以复制以上结构来添加更多科目，例如： -->
    <div class="subject-wrapper-wrapper" data-subject-id="physics" data-marks='[]'>
        <div class="subject-header">
            <h3>科目：物理</h3>
        </div>
        <div class="subject-content">
            <table>
                <thead>
                    <tr>
                        <th>成绩输入</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input class="grade-input" type="number" placeholder="输入成绩">
                        </td>
                    </tr>
                </tbody>
            </table>
            <button class="add-mark-btn">添加成绩并计算平均分</button>
        </div>
        <div class="average-display">
            <label for="physicsAverage">当前平均分:</label>
            <input id="physicsAverage" class="grades-average-output" type="text" placeholder="N/A" readonly>
        </div>
    </div>
</div>

document.addEventListener('DOMContentLoaded', () => {
    // 遍历所有“添加成绩并计算平均分”按钮
    document.querySelectorAll('.add-mark-btn').forEach(button => {
        button.addEventListener('click', function() {
            // 1. 定位相关元素
            // 使用 closest() 找到最近的父级 .subject-wrapper-wrapper 容器
            const subjectWrapper = this.closest(".subject-wrapper-wrapper");
            // 使用 querySelector() 在该容器内查找成绩输入框和平均分显示框
            const gradeInput = subjectWrapper.querySelector(".grade-input");
            const averageOutput = subjectWrapper.querySelector(".grades-average-output");

            // 2. 提取成绩数据
            const newGradeValue = gradeInput.value;
            const newGrade = parseFloat(newGradeValue);

            // 3. 数据验证
            if (isNaN(newGrade) || newGrade < 0 || newGrade > 100) {
                alert("请输入一个有效的成绩（0-100之间）。");
                gradeInput.value = ''; // 清空无效输入
                return;
            }

            // 4. 存储成绩
            // 从 data-marks 属性中获取已存储的成绩数组（JSON字符串），如果不存在则初始化为空数组
            let gradesArray = JSON.parse(subjectWrapper.dataset.marks || '[]');
            gradesArray.push(newGrade); // 将新成绩添加到数组
            // 将更新后的成绩数组重新存回 data-marks 属性（JSON字符串形式）
            subjectWrapper.dataset.marks = JSON.stringify(gradesArray);

            // 5. 计算平均分
            const sum = gradesArray.reduce((acc, current) => acc + current, 0); // 计算总和
            const average = gradesArray.length > 0 ? (sum / gradesArray.length).toFixed(2) : 'N/A'; // 计算平均值，保留两位小数

            // 6. 更新UI
            averageOutput.value = average; // 更新平均分显示框
            gradeInput.value = ''; // 清空成绩输入框，方便下次输入
        });
    });
});