本文介绍如何使用纯 JavaScript 实现 HTML 表格中“单行功耗 = 单台功率 × 安装数量”及“全表总功耗自动汇总”，无需为每行设置唯一 ID，通过语义化 name 属性与 DOM 遍历高效完成实时计算。
本文介绍如何使用纯 javascript 实现 html 表格中“单行功耗 = 单台功率 × 安装数量”及“全表总功耗自动汇总”，无需为每行设置唯一 id，通过语义化 `name` 属性与 dom 遍历高效完成实时计算。
要实现在表格中根据用户输入动态计算每台接入点（AP）的功耗，并自动汇总总功耗，关键在于结构可预测性与事件委托的合理运用。原 HTML 中功率值以纯文本形式嵌入 <td>，导致 JavaScript 难以统一读取；而修改后的方案将所有参与计算的数值（单台功率、安装数量、行小计）统一置于 <code><input> 元素中，并赋予语义化 name 属性（如 power、count、total），极大提升了脚本的健壮性与可维护性。
以下是完整实现逻辑：
✅ 核心思路
- 使用
input事件监听整个表格（事件委托），避免为每个输入框单独绑定； - 利用
target.closest('tr')快速定位当前操作所在的行； - 在该行内通过
querySelectorAll('input')按顺序获取power、count、total输入框（依赖 HTML 中<input>的书写顺序）； - 执行乘法运算并写入对应
total字段； - 遍历所有
name="total"的输入框，累加其数值，更新底部.grandPowerTotal单元格。
? 推荐 HTML 结构（精简关键部分）
<table class="accesspoints">
<caption>Access Points</caption>
<thead>
<tr>
<th>Access Point</th>
<th>Power Draw (Watt)</th>
<th>PoE port required</th>
<th>Number installed?</th>
<th>Power consumption</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://eu.store.ui.com/.../u7-pro-max" target="_blank">U7 Pro Max</a></td>
<td><input type="text" name="power" readonly value="25"></td>
<td>PoE+</td>
<td><input type="number" name="count" placeholder="0" min="0" value="0"></td>
<td><input type="text" name="total" readonly></td>
</tr>
<!-- 其他 AP 行结构完全一致 -->
</tbody>
<tfoot>
<tr>
<td colspan="3"></td>
<td class="totalpower">Total power consumption:</td>
<td class="grandPowerTotal">0</td>
</tr>
</tfoot>
</table>? 注意：
- 所有
power输入框设为readonly并预置固定值，确保数据源可信；count输入框建议添加min="0"和默认value="0"，防止空值或负数干扰计算；total和grandPowerTotal均为只读，避免用户误编辑；- 使用
<thead>/<code><tbody>/<code><tfoot> 明确语义，增强可访问性与样式控制能力。<h3>? JavaScript 计算逻辑（含容错处理）</h3><pre class="brush:php;toolbar:false;">document.addEventListener('DOMContentLoaded', () => { const table = document.querySelector('.accesspoints'); const grandTotalEl = document.querySelector('.grandPowerTotal'); const totalInputs = document.querySelectorAll('input[name="total"]'); table.addEventListener('input', (e) => { const input = e.target; // 仅响应 count 或 power 的变化（实际只需监听 count，因 power 不可编辑） if (input.name !== 'count') return; const row = input.closest('tr'); const [powerInput, countInput, totalInput] = row.querySelectorAll('input'); // 容错：空值、非数字转为 0 const power = parseFloat(powerInput.value) || 0; const count = parseInt(countInput.value) || 0; const total = power * count; totalInput.value = isNaN(total) ? '' : total.toFixed(1); // 保留一位小数更友好 // 重新计算总和 const sum = Array.from(totalInputs).reduce((acc, el) => { return acc + (parseFloat(el.value) || 0); }, 0); grandTotalEl.textContent = sum.toFixed(1) + ' W'; }); });</pre><h3>✅ 最终效果</h3> <ul> <li>用户在任意“Number installed?”输入框中键入数量，对应行的“Power consumption”即时更新；</li> <li>底部“Total power consumption”同步刷新，精确反映全部 AP 当前总功耗；</li> <li>支持清空、修改、增删（配合动态渲染时）等操作，逻辑稳定无副作用。</li> </ul> <p>该方案摒弃了冗长的 ID 列表和重复的事件绑定，以简洁、可扩展、符合现代 Web 开发实践的方式，完美解决多行动态计算场景。适用于网络设备选型、IT 资源估算、绿色节能分析等多种专业表格交互需求。</p> </tfoot>
