如何用JavaScript从HTML表格提取分数并对应科目计算平均分

1. 修正HTML模板（解决ID冲突与补充科目标识） #

先调整你的HTML结构，解决模板复用导致的ID重复问题，同时补充科目名称输入框，让每个科目可独立标识：

<ul>
  <div class="subjects">
    <div class="marks"></div>
    <!-- 新增科目按钮 -->
    <button id="add-subject">Add new subject</button>
    <template id="subject-template">
      <div class="subject-wrapper">
        <div class="subject-name">
          <input type="text" placeholder="Enter subject name">
        </div>
        <table>
          <thead>
            <tr>
              <th>Marks</th>
            </tr>
          </thead>
          <tbody class="marks-container">
            <tr>
              <td>
                <input class="grades" name="mark" type="number" placeholder="grade" min="0" max="100">
              </td>
            </tr>
          </tbody>
        </table>
        <button class="add-mark">Add new mark</button>
      </div>
      <div class="average">
        <input class="gradesAverage" placeholder="Your current average:" readonly="readonly">
      </div>
    </template>
  </div>
</ul>

2. JavaScript逻辑实现（分数关联、获取与平均分计算） #

添加以下JS代码，实现科目新增、分数添加、实时计算平均分的功能：

// 获取核心元素
const subjectsContainer = document.querySelector('.subjects .marks');
const subjectTemplate = document.getElementById('subject-template');
const addSubjectBtn = document.getElementById('add-subject');

// 新增科目
function addSubject() {
  const subjectClone = document.importNode(subjectTemplate.content, true);
  
  // 获取当前科目的关键元素
  const addMarkBtn = subjectClone.querySelector('.add-mark');
  const marksContainer = subjectClone.querySelector('.marks-container');
  const averageInput = subjectClone.querySelector('.gradesAverage');

  // 绑定添加分数按钮事件
  addMarkBtn.addEventListener('click', () => {
    const newMarkRow = document.createElement('tr');
    newMarkRow.innerHTML = `
      <td>
        <input class="grades" name="mark" type="number" placeholder="grade" min="0" max="100">
      </td>
    `;
    marksContainer.appendChild(newMarkRow);
    // 给新输入框绑定计算事件
    newMarkRow.querySelector('.grades').addEventListener('input', () => {
      calculateAverage(marksContainer, averageInput);
    });
    calculateAverage(marksContainer, averageInput);
  });

  // 给现有分数输入框绑定实时计算事件
  subjectClone.querySelectorAll('.grades').forEach(input => {
    input.addEventListener('input', () => {
      calculateAverage(marksContainer, averageInput);
    });
  });

  // 将新科目添加到页面
  subjectsContainer.appendChild(subjectClone);
}

// 计算指定科目的平均分
function calculateAverage(marksContainer, averageInput) {
  const gradeInputs = marksContainer.querySelectorAll('.grades');
  let total = 0;
  let validCount = 0;

  gradeInputs.forEach(input => {
    const value = parseFloat(input.value);
    // 只统计有效分数（0-100的数字）
    if (!isNaN(value) && value >= 0 && value <= 100) {
      total += value;
      validCount++;
    }
  });

  // 计算并显示平均分，无有效分时显示0
  const average = validCount > 0 ? (total / validCount).toFixed(2) : 0;
  averageInput.value = average;
}

// 页面加载时默认添加第一个科目
addSubject();

// 绑定新增科目按钮事件
addSubjectBtn.addEventListener('click', addSubject);

关键解决点说明 #

• 科目与分数关联：通过subject-wrapper作为独立容器，使用marks-container范围查询分数输入框，确保只获取当前科目的分数，避免跨科目混淆。
• 实时计算：每个分数输入框绑定input事件，输入内容变化时立即触发平均分计算。
• ID冲突修复：将模板中平均分输入框的id改为class，避免多个科目复用导致的DOM标识重复问题。
• 数据有效性校验：仅计算0-100范围内的有效数字，排除空值、非数字输入，避免计算错误。

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