计算指定TD值并显示到其他TD时出现NaN问题求修复方案

咱们先拆解下你代码里导致NaN的核心问题：

问题根源 #

1. DOM结构和遍历逻辑不匹配：你遍历了表格里的所有<tr>，但第一个<tr>里没有.result单元格，第二个<tr>里又没有.v2和输入框.v1——处理第二个tr时，parseFloat($(this).find('.v2').text())拿到的是空字符串，转成数字直接变成NaN，后续计算自然全是NaN了。
2. 未处理输入空值的情况：如果输入框是空的，parseFloat($(this).val())也会返回NaN，同样会让计算结果异常。

修复后的代码 #

<table class="table1">
  <tr>
    <td class="v2">29</td>
    <td>
      <input id="v1" class="v1" type="text" />
    </td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td class="result"></td>
  </tr>
</table>

<script>
$(function(){
  $("#v1").on("keyup", function() {
    // 精准获取目标元素的值，不用遍历所有tr
    const v2Value = parseFloat($('.v2').text()) || 0;
    const v1Value = parseFloat($(this).val()) || 0;
    const sum = v2Value - v1Value;
    // 把结果写入对应的.result单元格
    $('.result').text(sum);
  });
});
</script>

关键修改说明 #

• 放弃无效遍历：你的DOM结构里，.v2、输入框和.result不在同一行，遍历所有tr完全没必要，直接精准定位元素更高效。
• 添加NaN兜底：用|| 0确保如果parseFloat返回NaN（比如元素文本为空、输入框未填写），会自动用0替代，避免计算结果异常。
• 简化逻辑：直接绑定输入框的keyup事件，实时计算并更新结果，逻辑更清晰易懂。

如果之后需要支持多行数据（每行都有v2、输入框和result），可以调整成下面的写法，确保每行数据独立计算：

<table class="table1">
  <tr>
    <td class="v2">29</td>
    <td><input class="v1" type="text" /></td>
    <td class="result"></td>
  </tr>
  <tr>
    <td class="v2">50</td>
    <td><input class="v1" type="text" /></td>
    <td class="result"></td>
  </tr>
</table>

<script>
$(function(){
  $(".v1").on("keyup", function() {
    // 只操作当前输入框所在的行
    const $currentRow = $(this).closest('tr');
    const v2Value = parseFloat($currentRow.find('.v2').text()) || 0;
    const v1Value = parseFloat($(this).val()) || 0;
    $currentRow.find('.result').text(v2Value - v1Value);
  });
});
</script>

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