同一.trCalculate表格行内Percentage Change Calculator仅生效一次，求解决方案

完全可行，问题出在你当前的代码会把整行的所有输入框当成一组处理，导致所有结果单元格显示相同的值。只需要给每组计算器建立独立关联，让每个输入组对应自己的结果单元格即可，具体修改如下：

核心修改思路 #

• 给每组计算器的容器（包含两个输入框的<td>）添加统一类名calc-group，区分不同计算单元
• 输入值变化时，仅获取当前输入所在组内的CalcFrom和CalcTo值，计算后更新该组对应的结果单元格
• 增加除零判断，避免输入为0时出现计算错误

修改后的完整代码 #

CSS（无需改动） #

table {
    border-collapse: collapse;
    font-family: arial;
  }
  
  th {
    border: 1px solid #000;
    padding: 5px;
    border-collapse: collapse;
    font-size: 15px;
  }
  
  td {
    border: 1px solid #000;
    padding: 5px;
    border-collapse: collapse;
    font-size: 15px;
  }
  
  input {
    margin: 3px 0;
    border: 1px solid #00f;
    height: 32px;
    padding-left: 7px;
    font-size: 18px;
  }

HTML（添加分组类） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>

<table>
  <tr>
    <th>Calculator 01</th>
    <th>Calculator 01 Result</th>
    <th>Calculator 02</th>
    <th>Calculator 02 Result</th>
  </tr>
  <tr class="trCalculate">
    <!-- 第一组计算器，添加calc-group类 -->
    <td class="calc-group">
      <input type="text" class="ChangeCalulator CalcFrom" value=""><br>
      <input type="text" class="CalcTo ChangeCalulator" value="1000">
    </td>
    <td>
      <h2 class="CalcResult"></h2>
    </td>
    <!-- 第二组计算器，添加calc-group类 -->
    <td class="calc-group">
      <input type="text" class="ChangeCalulator CalcFrom" value=""></br>
      <input type="text" class="CalcTo ChangeCalulator" value="2000">
    </td>
    <td>
      <h2 class="CalcResult"></h2>
    </td>
  </tr>
</table>

JavaScript（修改计算逻辑） #

$(document).on("change keyup blur", ".ChangeCalulator", function() {
    // 找到当前输入所在的计算器组
    let calcGroup = $(this).closest('.calc-group');
    // 获取当前组内的两个输入值
    let first = Number(calcGroup.find('.CalcFrom').val());
    let second = Number(calcGroup.find('.CalcTo').val());
    
    let result = 0;
    // 避免除零错误
    if (first !== 0) {
        let minus = second - first;
        let divide = minus / first;
        result = divide * 100;
    }
    
    // 更新当前组对应的结果单元格（组的下一个td就是结果容器）
    calcGroup.next('td').find('.CalcResult').text(Number(result).toFixed(2));
});

关键改动说明 #

1. 分组隔离：通过calc-group类把每个计算器的输入框和对应结果单元格绑定，确保每组计算独立不干扰
2. 精准取值：用closest('.calc-group')锁定当前输入所属的组，只读取该组内的输入值，不会获取整行其他输入
3. 错误处理：增加first !== 0判断，防止除数为0时出现NaN错误结果
4. 结果定位：通过calcGroup.next('td')直接找到当前组对应的结果单元格，确保结果显示到正确位置

修改后，同一行内的多个计算器可独立运行，各自结果会显示在对应单元格中，完全满足排序需求。

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