用data-score属性标记目标单元格并配合事件委托可解决数值解析、dom更新时机和新增行求和失效问题：需校验输入合法性、过滤nan、用textcontent更新总计且避免innerhtml覆盖。
直接用 document.querySelectorAll 配合 reduce 就能搞定，但多数人卡在数值解析不干净、DOM 更新时机错乱、新增行后求和失效这三处。
data-score 属性比靠 children[1] 取值更可靠
硬写 row.children[1].textContent 看似快，但只要表格结构微调（比如加个操作按钮列），所有计算就崩。用语义化属性标记目标单元格，才是长期可维护的做法。
- 给参与计算的
<td> 加 <code>data-score属性，值可为空，仅作标记 - 输入或选择更新时，把数值写进
textContent，同时同步设dataset.score = value - 求和时只遍历
document.querySelectorAll('td[data-score]')，避免误抓表头或空单元格 - 推荐用事件委托：监听
table的input事件，用e.target.matches('.sum-input')判断是否命中目标 - 或者每次插入后，显式调用一次求和函数，比如
updateTotal() - 避免在
append()调用链里直接做+=运算——DOM 还没渲染完，querySelectorAll可能拿不到新节点 - 建议统一用
const num = parseFloat(cell.textContent) || 0，但前提是确保textContent是纯数字字符串 - 如果允许用户直接编辑
contenteditable单元格，需加正则校验：/^[-+]?\d*\.?\d+$/.test(text) - 遇到
undefined、null或空格字符串，parseFloat都会返回NaN，务必前置判断
动态添加行后必须重算，不能只靠初始绑定
jQuery 的 .append() 或原生 insertRow() 插入新行后，旧的事件监听器不会自动覆盖新元素。如果只在页面加载时绑定一次 input 事件，新行里的输入框根本不会触发求和。
parseFloat 处理空值和非法字符是高频翻车点
parseFloat('') 返回 NaN，parseFloat('abc') 也返回 NaN，但 NaN + 5 === NaN，整个总和就废了。不能只靠 || 0，得先过滤。
最易被忽略的是 tfoot 中总计单元格的更新方式：别用 innerHTML = total 直接覆盖，它可能清掉你加的 class 或事件；改用 textContent = total.toFixed(2) 更稳妥，且避免 XSS 风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
