如何用JavaScript实现表格数值的求和、样本数统计与平均值计算

完整可运行代码 #

HTML #

<table id="dataTable">
  <thead>
    <tr>
      <th>数值1</th>
      <th>数值2</th>
      <th>数值3</th>
      <th># of Samples</th>
      <th>Results（总和）</th>
      <th>Average（平均值）</th>
    </tr>
  </thead>
  <tbody>
    <tr class="dataRow">
      <td><input type="number" class="inputNum" step="any"></td>
      <td><input type="number" class="inputNum" step="any"></td>
      <td><input type="number" class="inputNum" step="any"></td>
      <td><span class="sampleCount">0</span></td>
      <td><span class="total">0.00</span></td>
      <td><span class="average">0.00</span></td>
    </tr>
    <!-- 可直接复制该行添加更多数据行 -->
    <tr class="dataRow">
      <td><input type="number" class="inputNum" step="any"></td>
      <td><input type="number" class="inputNum" step="any"></td>
      <td><input type="number" class="inputNum" step="any"></td>
      <td><span class="sampleCount">0</span></td>
      <td><span class="total">0.00</span></td>
      <td><span class="average">0.00</span></td>
    </tr>
  </tbody>
</table>

CSS #

table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
th {
  background-color: #f2f2f2;
}
input.inputNum {
  width: 80px;
  text-align: center;
}

JavaScript #

// 给所有输入框绑定实时计算事件
document.querySelectorAll('.inputNum').forEach(input => {
  input.addEventListener('input', calculateRow);
});

// 单行数据计算核心函数
function calculateRow(e) {
  // 获取当前输入框所在的行
  const row = e.target.closest('.dataRow');
  // 拿到该行所有输入框
  const inputs = row.querySelectorAll('.inputNum');
  
  let total = 0;
  let sampleCount = 0;
  
  // 遍历输入框，统计有效数值
  inputs.forEach(input => {
    const value = parseFloat(input.value);
    // 只处理合法数字（过滤空值、非数字内容）
    if (!isNaN(value)) {
      total += value;
      sampleCount++;
    }
  });
  
  // 计算平均值，避免除以0报错
  const average = sampleCount > 0 ? total / sampleCount : 0;
  
  // 更新行内结果
  row.querySelector('.sampleCount').textContent = sampleCount;
  row.querySelector('.total').textContent = total.toFixed(2);
  row.querySelector('.average').textContent = average.toFixed(2);
}

关键逻辑拆解 #

• 实时响应：用户输入/修改数值时立刻触发计算，不用额外点击按钮
• 有效数据筛选：只统计合法数字，空值、字母等无效内容直接忽略
• 防报错处理：计算平均值前先判断有效样本数，避免除以0出现NaN
• 格式统一：用toFixed(2)强制将总和、平均值保留两位小数，样本数直接输出整数
• 精准行定位：通过closest('.dataRow')锁定当前输入所在行，确保只计算该行数据，不干扰其他行

额外扩展：动态添加行 #

如果需要让用户自行添加新数据行，可加上以下代码：

<button onclick="addNewRow()">添加新行</button>

function addNewRow() {
  const tableBody = document.querySelector('#dataTable tbody');
  const newRow = document.createElement('tr');
  newRow.className = 'dataRow';
  newRow.innerHTML = `
    <td><input type="number" class="inputNum" step="any"></td>
    <td><input type="number" class="inputNum" step="any"></td>
    <td><input type="number" class="inputNum" step="any"></td>
    <td><span class="sampleCount">0</span></td>
    <td><span class="total">0.00</span></td>
    <td><span class="average">0.00</span></td>
  `;
  tableBody.appendChild(newRow);
  // 给新行的输入框绑定计算事件
  newRow.querySelectorAll('.inputNum').forEach(input => {
    input.addEventListener('input', calculateRow);
  });
}

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