JavaScript实现HTML表格分数获取与科目平均分计算教程

<ul>
    <div class="subjects">
        <div class="marks"></div>
        <template id="subject-template">
            <div class="subject-wrapper">
                <table>
                    <thead>
                        <tr>
                            <th>Subject</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input class="grades" name="mark" type="text" placeholder="grade">
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button class="add-mark">Add new mark</button>
            </div>
            <div class="average">
                <input id="gradesAverage" placeholder="Your current average:" readonly="readonly">
            </div>
        </template>
    </div>
</ul>

function add_mark(btn) {
  // 1. 查找共同祖先元素
  // 'btn' 是被点击的按钮元素。
  // closest(".subject-wrapper-wrapper") 会向上遍历DOM树，
  // 找到最近的、拥有 "subject-wrapper-wrapper" 类的祖先元素。
  // 这个祖先元素充当了当前科目的容器。
  var parent = btn.closest(".subject-wrapper-wrapper");

  // 2. 在共同祖先内部查找分数输入框
  // querySelector("[name=mark]") 在 'parent' 内部查找 name 属性为 "mark" 的元素。
  // 这样可以确保我们获取的是当前科目下的分数输入框。
  var input = parent.querySelector("[name=mark]");

  // 3. 在共同祖先内部查找平均分显示框
  // querySelector("#gradesAverage") 在 'parent' 内部查找 id 为 "gradesAverage" 的元素。
  // 同样，这确保了我们更新的是当前科目对应的平均分显示框。
  var output = parent.querySelector("#gradesAverage");

  // 4. 获取分数并转换为数字
  // input.value 获取输入框的当前值。
  // +input.value 将字符串值转换为数字类型，以便进行数学计算。
  var number = +input.value;

  // 5. 计算平均分（此为简化示例）
  // 在实际应用中，这里需要更复杂的逻辑来累加多个分数并计算平均值。
  // 例如，可能需要一个数组来存储该科目的所有分数。
  var avg = 12 + number; // 示例计算，实际应为 (现有分数总和 + 新分数) / (分数数量 + 1)

  // 6. 更新平均分显示框
  // 将计算出的平均值赋给显示框的 value 属性。
  output.value = avg;
}

<ul>
  <div class="subjects">
    <div class="marks"></div>

    <!-- 引入 subject-wrapper-wrapper 作为每个科目的独立容器 -->
    <div class="subject-wrapper-wrapper">
      <div class="subject-wrapper">
        <table>
          <thead>
            <tr>
              <th>Subject</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input class="grades" name="mark" type="text" placeholder="grade">
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 为按钮添加 onclick 事件，并传递 'this' (按钮本身) 作为参数 -->
        <button class="add-mark" onclick="add_mark(this)">Add new mark</button>
      </div>
      <div class="average">
        <input id="gradesAverage" placeholder="Your current average:" readonly="readonly">
      </div>
    </div>

    <!-- 假设这里可以有另一个科目实例，它也会有自己的 subject-wrapper-wrapper -->
    <!--
    <div class="subject-wrapper-wrapper">
      ... 另一个科目内容 ...
    </div>
    -->

  </div>
</ul>