HTML表格实时计算必须用JavaScript，核心是防NaN和格式污染：用input事件监听、type="number"配合清洗value、事件委托处理动态行、区分textContent/value、toFixed(2)控制显示精度。
HTML表格本身不带计算能力，所有实时计算必须靠 JavaScript 主动读取、转换、运算、写回——关键不是“能不能”，而是“怎么避免 NaN、空值、格式污染导致结果错乱”。
用 input 事件监听单元格内输入框
这是最直接、兼容性最好的方式，适用于 <td><input class="num-input"></td> 结构。
- 不要用
change，它只在失焦后触发；input才能捕获每一次按键、粘贴、删除 - 每个
<input>都要加type="number"，但别依赖它防非数字——用户仍可手动删掉 type 属性或用开发者工具绕过 - 务必对
value做清洗：parseFloat(input.value.replace(/[^0-9.-]/g, '')) || 0，否则 “¥1,234.56” 或 “1,000” 会变成NaN - 累加时用
reduce比 for 循环更简洁：Array.from(inputs).reduce((sum, i) => sum + (parseFloat(i.value) || 0), 0)
用事件委托统一处理动态表格
当表格行可能被 JS 动态增删（比如点击“添加一行”），逐个绑定 input 会漏掉新行——必须把监听器挂在父级 <table> 或 <tbody> 上。
- 监听
input事件，然后用e.target.matches('.num-input')判断是否是目标输入框 - 不要在回调里重复查 DOM：
document.querySelectorAll('.num-input')应该只在求和函数内部执行一次 - 如果某列需独立求和（如“金额列”），可在
<input>上加data-col="amount"，再用querySelectorAll('input[data-col="amount"]')精准筛选 - 注意：事件委托无法捕获
contenteditable单元格的输入，那是另一套机制
textContent 和 value 别混用
这是最常踩的坑：对 <input> 读取用 .value，对纯文本 <td>123</td> 读取才用 .textContent。
立即学习“前端免费学习笔记（深入）”；
-
.innerHTML会带标签、空格、换行，且有 XSS 风险，一律不用 -
.innerText受 CSS 影响（比如display: none的内容不计入），不可靠 - 如果用了
<output>显示结果，更新时必须用.value（不是.textContent），否则语义失效且部分浏览器不渲染 - 写回目标单元格时，如果是
<td id="total"></td>，就用el.textContent = total.toFixed(2)
避免浮点数精度误差影响显示
JavaScript 的 0.1 + 0.2 === 0.30000000000000004 是常态，但用户不需要看到 12 位小数。
- 显示前必须格式化：
total.toFixed(2)是最常用手段，但注意它返回字符串，不是数字 - 如果后续还要参与运算，先
parseFloat(total.toFixed(2))转回数字，否则拼接字符串会出错 - 别用
Math.round(total * 100) / 100替代toFixed——它对负数行为不一致，且不能控制补零（比如 1 → "1" 而不是 "1.00"） - 如果涉及金额，建议统一用“分”为单位存整数，彻底避开小数运算
真正麻烦的从来不是加法本身，而是用户随手粘贴的 “$1,234.56”、空格、全角数字、甚至 emoji——清洗和容错逻辑往往比求和代码还长。
