如何获取HTML表格单元格内文本框数值并点击按钮计算总和

云原生阿岚

2026-10-18

核心问题

你给所有卡路里、用量输入框设置了重复的id，HTML规定id必须全局唯一，document.getElementById("table-cal")只会返回页面中第一个匹配的输入框，无法拿到其他行的数值
没有从对应行的单元格子元素中获取输入框的value属性，直接拿innerHTML只能拿到HTML结构，拿不到输入框的实时值

修复方案

第一步：修改输入框的标识，避免id冲突

把创建输入框时设置重复id的逻辑，替换为设置class：

// 原代码
// tableAmount.id = "table-amount";
// tableCalNum.id = "table-cal";
// 替换为
tableAmount.classList.add("table-amount");
tableCalNum.classList.add("table-cal");

第二步：重写Calculate按钮的点击事件，累加所有卡路里数值

calculateBtn.addEventListener("click", function () {
  let totalCal = 0;
  // i从1开始，跳过表格第一行的表头
  for (let i = 1; i < ingrTable.rows.length; i++) {
    // 获取当前行第4列（索引为3）里的卡路里输入框
    const calInput = ingrTable.rows[i].cells[3].querySelector(".table-cal");
    // 输入值转数字累加，空值默认按0计算
    totalCal += Number(calInput.value) || 0;
  }
  // 测试输出总卡路里，你可以按需渲染到页面指定位置
  console.log("总卡路里：", totalCal);
});