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

<ul>
  <div class="subjects">
    <!-- 多个科目实例将通过模板或直接生成 -->
    <div class="subject-wrapper-wrapper" data-total-grades="0" data-grade-count="0">
      <div class="subject-wrapper">
        <table>
          <thead>
            <tr>
              <th>科目名称</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <!-- 成绩输入框，使用class而非name作为主要选择器更灵活 -->
                <input class="grades" type="text" placeholder="输入成绩">
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 按钮用于添加当前成绩并触发计算 -->
        <button class="add-mark" onclick="add_mark(this)">添加新成绩</button>
      </div>
      <div class="average">
        <!-- 平均分显示区域，使用id确保唯一性，但在此结构中，id可以在动态生成时加上科目ID -->
        <input id="gradesAverage" placeholder="当前平均分:" readonly="readonly">
      </div>
    </div>
    <!-- 更多科目实例可以放置在这里 -->
  </div>
</ul>

<!-- 如果需要动态添加科目，可以使用template标签 -->
<!--
<template id="subject-template">
    <div class="subject-wrapper-wrapper" data-total-grades="0" data-grade-count="0">
        <div class="subject-wrapper">
            <table>
                <thead>
                    <tr>
                        <th>科目名称</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input class="grades" type="text" placeholder="输入成绩">
                        </td>
                    </tr>
                </tbody>
            </table>
            <button class="add-mark" onclick="add_mark(this)">添加新成绩</button>
        </div>
        <div class="average">
            <input id="gradesAverage" placeholder="当前平均分:" readonly="readonly">
        </div>
    </div>
</template>
-->

/**
 * 处理添加新成绩的逻辑，并更新对应科目的平均分。
 * @param {HTMLElement} btn - 触发此函数的按钮元素。
 */
function add_mark(btn) {
  // 1. 使用 closest() 找到当前按钮所属的最近的科目包装器 (subject-wrapper-wrapper)。
  // 这是关联成绩与科目的关键一步，确保我们只操作当前科目的数据。
  const subjectWrapper = btn.closest(".subject-wrapper-wrapper");

  // 2. 在当前科目包装器内部，使用 querySelector() 找到成绩输入框和平均分显示框。
  // 这样可以避免选择到其他科目的元素。
  const gradeInput = subjectWrapper.querySelector(".grades");
  const averageOutput = subjectWrapper.querySelector("#gradesAverage"); // 注意：如果动态生成多个科目，id需要是唯一的，或改为类选择器

  // 3. 获取用户输入的成绩值并进行类型转换。
  const newGrade = parseFloat(gradeInput.value);

  // 4. 对输入进行基本验证。
  if (isNaN(newGrade) || newGrade < 0 || newGrade > 100) {
    alert("请输入0到100之间的有效数字成绩！");
    gradeInput.value = ''; // 清空无效输入
    return;
  }

  // 5. 获取并更新该科目的总分和成绩数量。
  // 我们使用 HTML 的 dataset 属性来存储每个科目的状态（总分和成绩数量）。
  // 这是一种将数据与DOM元素关联的有效方式。
  let totalGrades = parseFloat(subjectWrapper.dataset.totalGrades || 0);
  let gradeCount = parseInt(subjectWrapper.dataset.gradeCount || 0);

  totalGrades += newGrade;
  gradeCount += 1;

  // 更新 dataset 属性
  subjectWrapper.dataset.totalGrades = totalGrades;
  subjectWrapper.dataset.gradeCount = gradeCount;

  // 6. 计算新的平均分并更新显示。
  const average = totalGrades / gradeCount;
  averageOutput.value = `当前平均分: ${average.toFixed(2)}`; // 保留两位小数

  // 7. 清空输入框，方便用户输入下一个成绩。
  gradeInput.value = '';
}