HTML表格实时求和需用input事件监听（非onchange），绑定到input元素而非table；用class选择器定位目标单元格，parseFloat安全转换值，节流用requestAnimationFrame，兼容IE回退setTimeout，注意千分位清理与精度处理。
表格单元格输入后实时求和
HTML原生不支持自动计算，必须靠JavaScript监听输入事件。关键不是用onchange（要失焦才触发），而是用input事件——用户每敲一个键就响应，包括删除、粘贴、中文输入法上屏后。
常见错误是绑定在<table>上试图委托，但input事件不冒泡到<table>，必须直接绑定到<input>或<td>内的可编辑元素上。
- 确保目标单元格内是
<input type="number">，避免用户输字母导致NaN - 用
parseFloat(value) || 0安全转换，空字符串、空格、非法字符都转为0 - 不要用
innerHTML写入结果——会清空事件监听；改用textContent或value（对input）
多行多列求和时的DOM定位策略
不能硬编码rowIndex/cellIndex去遍历，容易因合并单元格（rowspan/colspan）或动态增删行错位。稳妥做法是给需要参与计算的单元格加统一class，比如class="sum-target"，再用document.querySelectorAll(".sum-target")收集。
如果求和范围固定（如“第3列所有数据行”），优先用CSS选择器：document.querySelectorAll("tbody tr td:nth-child(3) input")，比遍历rows数组更可靠。
立即学习“前端免费学习笔记（深入）”；
- 避免用
getElementsByTagName("td")——它会抓到表头、空单元格、带colspan的单元格 - 若某列含单位（如“12.5 元”），提取数字要用
value.match(/[\d.]+/)，再parseFloat - 合计单元格建议单独标记，如
id="total-amount"，方便精准更新
防止重复计算与性能卡顿
用户快速连按或粘贴大段数据时，input事件可能密集触发，导致连续求和拖慢页面。必须节流（throttle），而不是防抖（debounce）——防抖会延迟反馈，用户无法即时看到合计变化。
简单节流可用setTimeout加标志位，但更推荐用requestAnimationFrame：它保证计算在下一次重绘前执行，既及时又不阻塞主线程。
- 每次触发先清除前一个
rafId，再调用requestAnimationFrame(calcSum) - 别在
calcSum里反复查询DOM——把querySelectorAll结果缓存为变量，只在结构变更时刷新 - 合计值用
toFixed(2)格式化，但存储和计算仍用原始浮点数，避免累积舍入误差
兼容IE11及无JS降级方案
IE11不支持requestAnimationFrame，需回退到setTimeout(..., 0)；也不支持matches()，得用Element.prototype.msMatchesSelector或兜底用className.indexOf。
完全禁用JS时，表格应保持语义正确：合计行放在<tfoot>里，用<th scope="row">合计</th>明确角色，辅助技术能读出结构。
- 不要依赖
contenteditable——它在不同浏览器中光标行为不一致，且无法限制数字输入 - 服务端渲染时，可预填合计值，JS仅负责后续动态更新，避免首屏空白
- 移动端软键盘弹起可能遮挡合计行，需监听
resize或focus微调滚动位置
parseFloat会停在逗号，必须先清理非数字字符。这个细节，十次实现九次漏掉。 
