如何使用JavaScript从HTML表格中获取数据并计算各科目成绩平均值？

成绩管理页面里，各科分数往往以HTML表格的形式呈现。如果只想算一下每个学生的平均分，或者统计各科目的班级平均成绩，完全没有必要把数据发回后端处理，浏览器端用几行JavaScript就能搞定。本文将从读取表格结构开始，一步步讲解数据提取、类型转换、求和计算以及结果展示的完整流程，并给出可以直接运行的示例代码。

一、先搞清楚表格的DOM结构

要正确取数，必须先明白浏览器是如何解析<table>的。一个标准表格由<thead>和<tbody>组成，<thead>里放表头行，<tbody>里放数据行。浏览器在解析HTML时，即使你没有显式写<tbody>标签，也会自动补上这个节点，所以通过children或rows遍历时要注意层级关系。

假设页面上有这样一张成绩表，包含三门科目的分数：

<table id="scoreTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>英语</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>85</td><td>92</td><td>78</td></tr>
    <tr><td>李四</td><td>90</td><td>66</td><td>88</td></tr>
    <tr><td>王五</td><td>72</td><td>95</td><td>83</td></tr>
  </tbody>
</table>
<p id="result"></p>

拿到这张表之后，有两个关键属性需要掌握：table.rows返回表格中所有行的类数组集合，包括表头行；row.cells返回该行中所有单元格。利用这两个属性，可以很方便地跳过表头，只处理tbody里的数据行，这也是下文所有计算的基础。

二、遍历表格并计算每人平均分

遍历的思路很简单：先通过querySelectorAll('#scoreTable tbody tr')选中所有数据行，再对每一行的单元格做求和处理。需要注意的第一个坑是，innerText取出来的值是字符串，比如"85"，直接用加号拼接会得到"8592"这样的错误结果，所以必须先做类型转换。

推荐使用Number或者一元加号做转换，并配合isNaN过滤掉非法值。这样即使某个单元格被误填成了文字或者为空，脚本也不会报错，只是跳过该值。完整代码如下：

function calcRowAverage() {
  const rows = document.querySelectorAll('#scoreTable tbody tr');
  rows.forEach(function (row) {
    const cells = row.cells;
    const name = cells[0].innerText;
    let sum = 0;
    let count = 0;

    // 从第2列开始遍历，跳过姓名列
    for (let i = 1; i < cells.length; i++) {
      const num = Number(cells[i].innerText);
      if (!isNaN(num) && cells[i].innerText.trim() !== '') {
        sum += num;
        count++;
      }
    }

    const avg = count > 0 ? (sum / count).toFixed(2) : '0.00';
    console.log(name + ' 的平均分是：' + avg);
  });
}

calcRowAverage();

上面代码中，toFixed(2)用于保留两位小数，这是成绩统计中最常见的需求。要特别提醒的是，toFixed返回的是字符串，如果后续还要参与数学运算，记得再转回数字类型，例如写成Number(avg)，否则又会出现字符串拼接的问题。

顺便提一句选择器的差异。getElementsByClassName返回的是实时集合，页面DOM变化时集合会自动更新，适合动态添加行的场景；而querySelectorAll返回的是静态快照，取完之后即使表格新增了行，集合也不会变化。在数据固定的统计场景下，后者写起来更简洁，配合forEach直接遍历即可，不需要先转成数组。

三、按科目统计班级平均分

除了算每个人的平均分，按列统计每门科目的班级平均分同样常见。思路是反过来：外层循环列，内层循环行。为了减少重复查询DOM带来的性能开销，可以先把所有数据一次性读进一个二维数组，后续计算全部在内存中完成，数据量较大时这种写法优势明显。

function calcSubjectAverage() {
  const rows = document.querySelectorAll('#scoreTable tbody tr');

  // 第一步：把表格数据读入二维数组
  const data = [];
  rows.forEach(function (row) {
    const rowData = [];
    for (let i = 1; i < row.cells.length; i++) {
      rowData.push(Number(row.cells[i].innerText));
    }
    data.push(rowData);
  });

  // 第二步：借助reduce按列求和
  const subjects = ['语文', '数学', '英语'];
  const result = subjects.map(function (subject, col) {
    const sum = data.reduce(function (acc, row) {
      return acc + (isNaN(row[col]) ? 0 : row[col]);
    }, 0);
    return { subject: subject, avg: (sum / data.length).toFixed(2) };
  });

  console.log(result);
  return result;
}

reduce是这类聚合计算的核心方法，第二个参数0是初始累加值，一定不要省略，否则当数组为空时会直接报错。如果科目名称是从表头动态读取的，可以把subjects数组改成遍历thead中的th元素来生成，这样表格结构变化时脚本不需要修改，通用性更好。

四、把结果回填到页面并处理边界情况

计算结果只在控制台看还不够，实际项目中通常要把平均分追加到表格末列或输出到指定区域。下面这段代码演示了动态添加一列平均分，并把统计结果写入页面的完整做法：

function renderResult() {
  const rows = document.querySelectorAll('#scoreTable tbody tr');

  // 动态给表头增加一列
  const headRow = document.querySelector('#scoreTable thead tr');
  const newTh = document.createElement('th');
  newTh.innerText = '平均分';
  headRow.appendChild(newTh);

  // 给每一行计算并追加平均分单元格
  rows.forEach(function (row) {
    let sum = 0;
    let count = 0;
    for (let i = 1; i < row.cells.length; i++) {
      const num = Number(row.cells[i].innerText);
      if (!isNaN(num)) {
        sum += num;
        count++;
      }
    }
    const newTd = document.createElement('td');
    newTd.innerText = (sum / count).toFixed(2);
    row.appendChild(newTd);
  });

  // 科目平均分写入页面
  const subjectAvg = calcSubjectAverage();
  const box = document.getElementById('result');
  let html = '';
  subjectAvg.forEach(function (item) {
    html += item.subject + '班级平均分：' + item.avg + '；';
  });
  box.innerText = html;
}

// 保证DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', renderResult);

这里有两个细节值得注意。第一，脚本执行的时机问题：如果把script标签写在表格之前，此时DOM还没构建好，querySelectorAll会取不到任何元素。解决办法要么把脚本放到body末尾，要么用DOMContentLoaded事件包裹，后者更稳妥。

第二，数据清洗问题。真实场景中表格里可能混入“缺考”、“-”或者全角空格之类的脏数据，直接Number转换会得到NaN。前面代码里用isNaN做了过滤，如果希望更严格，可以加上分数范围校验，比如只接受0到150之间的数值：

function parseScore(text) {
  const num = Number(String(text).trim());
  if (isNaN(num) || num < 0 || num > 150) {
    return null; // 非法分数
  }
  return num;
}

把Number(...)替换成parseScore(...)，并在累加时判断返回值是否为null，整个统计逻辑的抗脏数据能力就会大幅提升。这套“读取DOM、转换类型、数组聚合、回填页面”的模式，不仅适用于成绩表，稍加改造就能用在报价汇总、库存统计等任何表格型数据的计算场景中。

JavaScriptHTML表格成绩平均值修改时间：2026-09-05 08:38:35