本文介绍如何使用纯 JavaScript 实现 HTML 表格中“单行功耗 = 单台功率 × 安装数量”及“全表总功耗自动汇总”，无需为每行设置唯一 ID，通过语义化 name 属性与 DOM 遍历高效完成实时计算。

本文介绍如何使用纯 javascript 实现 html 表格中“单行功耗 = 单台功率 × 安装数量”及“全表总功耗自动汇总”，无需为每行设置唯一 id，通过语义化 `name` 属性与 dom 遍历高效完成实时计算。

要实现在表格中根据用户输入动态计算每台接入点（AP）的功耗，并自动汇总总功耗，关键在于结构可预测性与事件委托的合理运用。原 HTML 中功率值以纯文本形式嵌入 ，导致 JavaScript 难以统一读取；而修改后的方案将所有参与计算的数值（单台功率、安装数量、行小计）统一置于 元素中，并赋予语义化 name 属性（如 power、count、total），极大提升了脚本的健壮性与可维护性。

以下是完整实现逻辑：

✅ 核心思路

• 使用 input 事件监听整个表格（事件委托），避免为每个输入框单独绑定；
• 利用 target.closest('tr') 快速定位当前操作所在的行；
• 在该行内通过 querySelectorAll('input') 按顺序获取 power、count、total 输入框（依赖 HTML 中 的书写顺序）；
• 执行乘法运算并写入对应 total 字段；
• 遍历所有 name="total" 的输入框，累加其数值，更新底部 .grandPowerTotal 单元格。

? 推荐 HTML 结构（精简关键部分）

Access Points

Access Point	Power Draw (Watt)	PoE port required	Number installed?	Power consumption
U7 Pro Max		PoE+
			Total power consumption:	0

? 注意：

• 所有 power 输入框设为 readonly 并预置固定值，确保数据源可信；
• count 输入框建议添加 min="0" 和默认 value="0"，防止空值或负数干扰计算；
• total 和 grandPowerTotal 均为只读，避免用户误编辑；
• 使用 // 明确语义，增强可访问性与样式控制能力。

  ? JavaScript 计算逻辑（含容错处理）

  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';
    });
  });

  ✅ 最终效果

  • 用户在任意“Number installed?”输入框中键入数量，对应行的“Power consumption”即时更新；
  • 底部“Total power consumption”同步刷新，精确反映全部 AP 当前总功耗；
  • 支持清空、修改、增删（配合动态渲染时）等操作，逻辑稳定无副作用。

  该方案摒弃了冗长的 ID 列表和重复的事件绑定，以简洁、可扩展、符合现代 Web 开发实践的方式，完美解决多行动态计算场景。适用于网络设备选型、IT 资源估算、绿色节能分析等多种专业表格交互需求。