Jquery 我需要在上一个表格单元格中显示计算结果

$(document).on("change keyup blur live", "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());
  let result = ((to - from) / from) * 100;
  $td.next().find('.calc-result').text(result.toFixed(2));
  $td.next().find('.calc-result').val(result.toFixed(2));
});

<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>

$(document).on("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());
  let result = ((to - from) / from) * 100;
  $td.prev().find('.calc-result').val(result.toFixed(2));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.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" readonly />
      </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>

Jquery相关问答推荐

无法通过单击从元素获取数据

在 div 中找到第一次出现的类

未捕获的类型错误：无法读取未定义的属性toLowerCase

Bootstrap 3 RC 1 中的 typeahead JavaScript 模块在哪里？

将变量传递给jQuery AJAX成功回调中的函数

如何在循环内创建动态变量名称？

这些 jQuery 就绪函数之间有什么区别？

为什么要两次声明 jQuery？

不使用插件的 jQuery 缓动函数

使用 jQuery 将行添加到表的 tbody

有没有办法放大 D3 力布局图？

如何使用 jQuery 显示忙碌指示器？

JavaScript / jQuery：测试窗口是否有焦点

jquery-ui datepicker更改z-index

使用 jQuery 验证插件自定义日期格式

在javascript中检测按键的最简单方法

将图像 url 转换为 Base64

$(document).on("click"... 不工作？

fancybox2 / fancybox 导致页面跳转到顶部

JQuery 判断 DOM 中的重复 id