需求：实现HTML表格输入数据时动态更新差异百分比的JavaScript

1. 确认表格结构 #

先给表格关键单元格添加类名，方便JS定位，示例结构如下：

<table id="data-table">
  <tr>
    <th>Design Data</th>
    <th>Data 1</th>
    <th>Data 2</th>
    <th>% of Difference</th>
  </tr>
  <tr>
    <td><input type="number" class="design-data" value="200"></td>
    <td><input type="number" class="data-input"></td>
    <td><input type="number" class="data-input"></td>
    <td class="diff-percent">0%</td>
  </tr>
  <!-- 更多数据行... -->
</table>

2. 修改后的JavaScript逻辑 #

核心是监听Data1/Data2输入框的变化，实时用当前行的Design Data计算百分比：

// 用事件委托监听表格内的输入事件，支持动态新增行
document.getElementById('data-table').addEventListener('input', function(e) {
  // 只处理Data1/Data2的输入框
  if (!e.target.classList.contains('data-input')) return;

  const currentRow = e.target.closest('tr');
  // 获取设计值和当前输入值，空值或非数字默认设为0
  const designValue = parseFloat(currentRow.querySelector('.design-data').value) || 0;
  const inputValue = parseFloat(e.target.value) || 0;

  // 避免除数为0的异常情况
  if (designValue === 0) {
    currentRow.querySelector('.diff-percent').textContent = 'N/A';
    return;
  }

  // 计算差异百分比：(输入值 / 设计值) * 100
  const percentage = (inputValue / designValue) * 100;
  // 按需求保留精度，这里取整数
  currentRow.querySelector('.diff-percent').textContent = `${Math.round(percentage)}%`;
});

关键修改点 #

• 放弃仅依赖Final Data的逻辑，改为监听Data1/Data2的输入事件，直接用当前输入值计算
• 用事件委托替代逐个绑定事件，更高效且兼容动态添加的行
• 增加除数为0的判断，避免出现NaN或无限大的错误显示

验证效果 #

• Design Data设为200，Data1输入100 → 差异百分比显示50%
• Design Data设为200，Data2输入150 → 差异百分比显示75%

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