如何使用JS对表格内td文本值与td嵌套input的值汇总求和

问题原因 #

你的代码核心问题是两类total类元素的取值方法不统一：

• 挂载在input元素上的total类属于表单元素，可以通过jQuery的val()方法获取值
• 挂载在td元素上的total类属于普通容器元素，没有value属性，调用val()会返回undefined，转成float后得到NaN，最终累加结果就会出错

修正后的代码 #

let gross = 0;
$(".total").each(function() {
  // 根据元素类型选择对应取值方式
  const rawValue = $(this).is('input') ? $(this).val() : $(this).text();
  // 非法值默认按0计算，避免累加异常
  gross += parseFloat(rawValue) || 0;
});
document.getElementById('gross_amount').innerHTML = gross;

补充HTML规范优化 #

你当前把#gross_amount的div直接放在<table>标签内部不符合HTML规范，table标签内仅允许放置表格相关元素，建议把div移到</table>标签外，避免浏览器渲染异常。

内容的提问来源于stack exchange，提问作者Hazem El-behairy