如何将jQuery百分比计算器结果显示在前置表格单元格中

你当前的代码是把计算结果输出到输入框所在<td>的下一个单元格，要改成输出到前置单元格（左侧的Result列），只需要调整JS中选择目标单元格的逻辑，具体改动如下：

修改后的JS代码 #

$(document).on("change keyup blur", "input.change-calculator", e => {
  let $td = $(e.currentTarget).closest('td');
  let from = Number($td.find('.calc-from').val());
  let to = Number($td.find('.calc-to').val());
  
  // 避免除以0导致的错误
  if (from === 0) {
    $td.prev().find('.calc-result').val('');
    return;
  }
  
  let result = ((to - from) / from) * 100;
  // 切换为prev()获取当前td的前置同级单元格
  $td.prev().find('.calc-result').val(result.toFixed(2));
});

关键改动说明 #

1. 修正事件绑定：调整事件选择器顺序，移除已废弃的live事件，避免无效监听；
2. 切换目标单元格：把$td.next()改为$td.prev()，prev()方法会获取当前<td>的前一个同级单元格，正好对应左侧的Result列；
3. 增加错误防护：当calc-from的值为0时，清空结果框并终止计算，避免出现NaN或无穷大的异常结果；
4. 简化代码：calc-result是输入框，仅需用val()设置值，无需重复调用text()。

完整HTML代码（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="abcde-table" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Result</th>
      <th>Calculator</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" class="calc-result">
      </td>
      <td>
        <input type="text" class="change-calculator calc-from" value="1500"><br>
        <input type="text" class="change-calculator calc-to" value="">
      </td>
    </tr>
  </tbody>
</table>

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