如何在输入值变更时计算表格行的列值总和？解决$未定义报错

报错与逻辑问题说明 #

“$ is not defined”是因为代码里用了jQuery的$语法，但未引入jQuery库。同时行总计计算还有两处逻辑错误：

• 循环时重复选取所有.size_qty元素，应该取当前循环的输入框
• 输入框值是字符串类型，直接累加会变成字符串拼接，需要转成数字再计算

解决方案 #

方案1：引入jQuery并修复计算逻辑 #

先在HTML中添加jQuery库的引入（放在JS代码之前）：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

然后修改JS函数：

function sum_row_qty(el) {
  let rowTotal = 0;
  const parentRow = $(el).closest('tr');
  // 遍历当前行的所有数量输入框
  parentRow.find('.size_qty').each(function() {
    // 将输入值转为数字，空值或非数字默认取0
    rowTotal += Number($(this).val()) || 0;
  });
  // 将计算结果更新到总计单元格，保留两位小数
  parentRow.find('.total').text(rowTotal.toFixed(2));
}

方案2：原生JavaScript实现（无需jQuery） #

如果不想依赖jQuery，直接用原生JS编写，彻底避免$相关报错：

function sum_row_qty(el) {
  let rowTotal = 0;
  const parentRow = el.closest('tr');
  const qtyInputs = parentRow.querySelectorAll('.size_qty');
  
  // 遍历当前行的数量输入框
  qtyInputs.forEach(input => {
    rowTotal += Number(input.value) || 0;
  });
  
  // 更新总计单元格内容
  parentRow.querySelector('.total').textContent = rowTotal.toFixed(2);
}

HTML部分保持不变，输入框的onchange事件可正常触发计算函数。

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