input事件是监听数值输入框实时求和的唯一可靠选择，需统一class绑定、用parseFloat清洗数据，动态表格中应筛选已勾选行并预存data-value提升性能。
input事件监听所有数值输入框
只要用户一敲键盘，就得立刻算出总和——input事件是唯一靠谱的选择。用change会等失焦，用keyup漏掉粘贴和右键粘贴，只有input能覆盖所有输入方式。
实操要点：
- 给所有参与计算的
加统一 class，比如class="sum-field" - 用
document.querySelectorAll(".sum-field")一次性获取全部，别一个个getElementById - 每个字段都绑定
addEventListener("input", calculateTotal)，别只绑一次父容器（除非你用事件委托） -
calculateTotal里必须用parseFloat(val) || 0，不能用Number(val)——后者把空字符串转成0看似方便，但会把" 12 "这种带空格的也转成12，而parseFloat更保守，适合表单场景
动态表格中复选框选中行求和
用户勾选几行，就只加这几行的某列数值（比如“余额”），不是全表累加。最容易踩的坑是：没判断复选框是否被勾选，或者用querySelectorAll("tr")遍历所有行却忘了跳过表头或未选中的行。
正确做法：
- 复选框统一加
class="select-row"，对应数据行的“余额”单元格加class="balance" - 在求和函数里，先用
document.querySelectorAll(".select-row:checked")拿到所有已勾选的复选框 - 再用
.forEach遍历它们，对每个checkbox取closest("tr")找到所在行，再找该行内的.balance单元格 - 读值时用
cell.textContent.trim()去空格，再parseFloat，避免innerText在某些浏览器里带换行符
用data属性预存数值提升性能
当表格行数超过50、且频繁触发求和（比如配合搜索过滤或滚动加载），每次都要从 DOM 文本里解析数字，会明显卡顿。这时应该把数值提前存在data-属性里，绕过文本提取环节。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
怎么落地：
- 生成表格 HTML 时，把原始数字写进
data-value="123.45"，同时显示文本123.45或AED 123.45 - 求和时直接读
el.dataset.value，不用parseFloat(el.textContent) - 如果后端返回的是整数但前端要显示千分位，就让后端同时吐出
value和display两个字段，避免前端再做格式化反解析 - 注意：
dataset只支持字符串，所以仍要parseFloat(el.dataset.value)，但比从渲染后文本里抠快得多
output元素 + oninput 内联写法适合极简场景
如果你的页面就两三个输入框，不打算后续扩展，又想少写 JS，配合oninput是最轻量的方案。它原生语义明确，且不需要额外事件绑定逻辑。
但得小心这些细节：
-
必须放在内才保证兼容性，否则 Safari 可能不响应 - 每个输入框写
oninput="updateSum()"，函数里用document.getElementById("a").value取值，别用this.value——因为事件可能冒泡，this不一定指向当前输入框 -
updateSum里所有值都要|| 0兜底，比如let a = +document.getElementById("a").value || 0，+号强制转换比parseInt更适合小数 - 别在
oninput里调用console.log或复杂计算，它每敲一个字符就执行一次，容易卡 UI
实际项目里，最常被忽略的是数值清洗环节：带单位（AED、$）、带逗号（1,234.56）、带空格、甚至中文数字“一”，都会让parseFloat静默失败为NaN，然后整个总和变成NaN。真要健壮，得在读值前先.replace(/[^\d.-]/g, "")，但这个正则不能无脑套用——比如去掉-会误伤负数，得看业务是否允许负值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
