如何用JavaScript实现表格行独立计算及总功耗求和（无需独立ID）

完全可以做到！不用给每行添加独立ID，通过DOM元素的层级关联就能完成每行功耗计算和总功耗求和，以下是具体实现：

核心思路 #

• 监听所有数量输入框的input事件，用户输入/修改数值时自动触发计算
• 通过输入框所在的表格行（tr），关联获取该行的单设备功耗值，计算单种设备总功耗并填入对应单元格
• 遍历所有设备行，累加单种设备功耗得到总功耗，更新总计单元格

完整代码实现 #

<table class="accesspoints">
  <caption>
    Access Points
  </caption>

  <tr>
    <th>Access Point</th>
    <th>Power Draw (Watt)</th>
    <th>PoE port required</th>
    <th>Number installed?</th>
    <th>Power consumption</th>
  </tr>

  <tr>
    <td>
      U7 Pro Max
    </td>
    <td class="powerperdevice">25</td>
    <td>PoE+</td>
    <td class="numberofdevices"><input type="number" name="apinstalled" placeholder="Number installed?"></td>
    <td class="totalpowerperdevice"></td>
  </tr>

  <tr>
    <td>
      U7 Pro
    </td>
    <td class="powerperdevice">21</td>
    <td>PoE+</td>
    <td class="numberofdevices"><input type="number" name="apinstalled" placeholder="Number installed?"></td>
    <td class="totalpowerperdevice"></td>
  </tr>

  <tr>
    <td>
      U7 Pro Wall
    </td>
    <td class="powerperdevice">22</td>
    <td>PoE+</td>
    <td class="numberofdevices"><input type="number" name="apinstalled" placeholder="Number installed?"></td>
    <td class="totalpowerperdevice"></td>
  </tr>

  <tr>
    <td>
      U7 Outdoor
    </td>
    <td class="powerperdevice">19</td>
    <td>PoE+</td>
    <td class="numberofdevices"><input type="number" name="apinstalled" placeholder="Number installed?"></td>
    <td class="totalpowerperdevice"></td>
  </tr>
<!-- Total power consumption for Access Points-->
  <tr> 
    <td></td>
    <td></td>
    <td></td>
    <td class="totalpower">Total power consumption:</td>
    <td class="grand-total"></td>
  </tr>

</table>

<script>
// 获取所有数量输入框
const inputElements = document.querySelectorAll('input[name="apinstalled"]');
// 获取总计单元格
const grandTotalCell = document.querySelector('.grand-total');

// 定义计算函数
function calculatePower() {
  let grandTotal = 0;

  // 遍历每个输入框所在的行
  inputElements.forEach(input => {
    const row = input.closest('tr');
    // 获取单设备功耗
    const powerPerDevice = parseFloat(row.querySelector('.powerperdevice').textContent) || 0;
    // 获取输入的数量，默认0
    const deviceCount = parseInt(input.value) || 0;
    // 计算单种设备总功耗
    const totalPerDevice = powerPerDevice * deviceCount;
    // 填入对应单元格
    row.querySelector('.totalpowerperdevice').textContent = totalPerDevice + ' W';
    // 累加到总功耗
    grandTotal += totalPerDevice;
  });

  // 更新总功耗
  grandTotalCell.textContent = grandTotal + ' W';
}

// 给每个输入框添加事件监听
inputElements.forEach(input => {
  input.addEventListener('input', calculatePower);
});
</script>

关键细节说明 #

• 用input.closest('tr')快速定位输入框所在的表格行，无需依赖ID，完全靠DOM层级关联
• 处理了输入为空或非数字的情况，默认取0，避免计算出错
• 实时监听输入变化，用户修改数值时立即更新计算结果

内容的提问来源于stack exchange，提问作者GielV