JavaScript动态求和教程｜表格实时计算方法

3、编写通用sumByAttribute函数，根据data-sum-col值筛选同列输入值，执行数值累加。

4、在页面加载完成后调用sumByAttribute，并为所有含data-sum-col的input绑定input事件回调。

三、使用contenteditable单元格配合keyup事件

该方案允许用户直接在

1、将表格中需参与计算的

2、为该类所有单元格绑定keyup事件，检测按键是否为数字、退格、删除、小数点或方向键。

3、在事件处理函数中，使用textContent提取当前单元格内容，用正则/^[-+]?\d*\.?\d+$/验证格式有效性。

4、验证通过后，遍历同列所有editable-number单元格，累加有效数值并更新合计行对应位置的textContent。

四、基于Array.from与reduce的函数式求和写法

该方案采用现代JavaScript语法，提升代码可读性与维护性，适用于已知列索引的固定结构表格。

1、获取表格对象：const table = document.getElementById("data-table")。

2、使用table.rows获取所有行，再通过Array.from(rows).slice(1)跳过表头行。

3、对每行调用row.cells[colIndex].textContent提取指定列文本，经parseFloat转换后存入数组。

4、使用数组reduce方法执行累加：numbers.reduce((a, b) => a + (isNaN(b) ? 0 : b), 0)。

5、将结果赋值给合计单元格的innerText，例如document.getElementById("sum-result").innerText = total;

五、支持多列独立求和的模块化封装

该方案将求和逻辑封装为独立函数sumColumns(config)，通过配置对象声明各列ID、目标单元格与校验规则。

1、定义config对象，包含columns数组，每项含key（列标识）、selector（CSS选择器）、target（合计容器）、validator（校验函数）。

2、为每个column.selector匹配的元素集合注册input事件，事件处理器中提取值并缓存至列专属数组。

3、调用validator对当前输入值进行校验，仅当返回true时才纳入计算。

4、每次触发后重新执行该列reduce累加，并更新对应target.innerHTML。

5、在页面初始化时调用sumColumns(config)，完成全部列绑定与首次计算。

今天关于《JavaScript动态求和教程｜表格实时计算方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！