用input事件监听输入框实现边输边算，只绑定class="amount"的input，用el.value取值并parsefloat()||0转数字，缓存dom元素提升性能，汇总后tofixed(2)仅用于显示。
表格单元格输入后自动求和，用 input 事件监听最稳
直接绑定 input 而不是 change，才能做到“边打字边算”。change 要失焦才触发，用户还没输完就看不到结果；input 每次按键都响应，体验更接近 Excel。
常见错误是给整个表格绑一次事件，结果每次都要遍历所有 td —— 实际只需监听目标列的 input，比如只对 class="amount" 的输入框生效：
document.querySelectorAll('td input.amount').forEach(el => {
el.addEventListener('input', updateTotal);
});
- 确保输入框是
<input type="text">或<input type="number">，后者会自动过滤非数字字符，但移动端软键盘可能不友好 - 值为空或非数字时，
parseFloat()返回NaN，记得用|| 0安全转换 - 别在事件里重复查询 DOM（如每次调用
document.querySelectorAll），提取到外部缓存
updateTotal 函数里怎么安全取值并汇总？
别用 innerText 读单元格文本——如果单元格里有空格、换行或隐藏标签，会出错。正确做法是：输入框的值从 el.value 取，表格中已渲染的数值从对应 input 元素取。
典型结构是每行一个 input，底部一行放合计：
<tr><td><input class="amount" value="12.5"></td></tr><tr><td><input class="amount" value="8"></td></tr><tr class="total"><td><span id="sum">0</span></td></tr>
汇总逻辑示例：
function updateTotal() {
const inputs = document.querySelectorAll('input.amount');
let sum = 0;
inputs.forEach(input => {
const val = parseFloat(input.value) || 0;
sum += val;
});
document.getElementById('sum').textContent = sum.toFixed(2);
}
-
toFixed(2)是格式化显示，不是计算精度控制；真实计算仍用原始浮点数，否则连续加减会累积舍入误差 - 如果某列要支持负数或带千分位逗号（如
"1,234.56"），需先用replace(/[,￥]/g, '')清洗字符串 - 避免在循环中频繁操作 DOM，比如反复改
textContent—— 先算完再写一次
跨行合并单元格（rowspan）时，怎么定位对应数据行？
当表格用了 rowspan="3"，JS 通过 tr 索引找行会错位。不要依赖 table.rows[i] 的下标，改用元素关系定位：
- 从触发事件的
input出发，用el.closest('tr')找到所在行，再用row.cells[列索引]取同列其他单元格 - 如果要汇总“同一产品多规格”的横向小计，建议把每组数据包在独立
<tbody> 里，比靠 <code>rowspan更易维护 -
rowspan单元格本身没有自己的input，它的值应由所属逻辑行决定，不要尝试往td[rowspan]里塞输入框 - 把所有
input.amount缓存为数组（const inputs = Array.from(document.querySelectorAll(...))），避免重复 query - 合计结果写入
<span></span>没问题，但如果要高亮超限行，用classList.toggle()比直接设style.color更轻量 - 极端情况（如实时财务报表），可加节流：
setTimeout延迟 100ms 再执行汇总，防止狂敲导致多次冗余计算
性能卡顿？100 行表格重新计算慢怎么办
每输一个字符就遍历全部 input，100 行就是 100 次 parseFloat —— 实际并不慢，真正瓶颈常出在 DOM 查询和重排上。
复杂点在于：不同列可能有不同计算规则（单价×数量=金额），别硬塞进一个 updateTotal；按列职责拆成 updateAmount、updatePrice 等函数，各自监听对应 class，互不干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
