JS动态表格输入框仅返回首个值 后续输入字段无法正常访问

代码存在两个直接导致取值异常的核心错误：

• 语法错误：第二个if判断语句末尾多写了一个分号;，直接切断了条件判断和后续逻辑块的关联，后续取值代码不受if条件控制，作用域完全错乱。
• 上下文指向错误：你注释掉了正确获取当前操作行的代码var lastRow = $(this).closest("tr");，后续取值使用的$(tr)没有绑定当前触发操作的行，选择器默认匹配DOM中第一个符合规则的tr节点，因此永远只能拿到第一行输入框的值。
• 额外隐患：如果是动态新增的表格行，直接给input绑定事件的写法无法覆盖后续新增的元素，也会导致交互失效。

1. 去掉if语句末尾多余的分号
2. 触发事件时先通过closest("tr")定位到当前操作的行，所有输入框取值都从当前行的jQuery对象下查找，不要使用未定义上下文的$(tr)选择器
3. 用事件委托的方式绑定事件，适配动态生成的表格元素

修复后的参考代码：

// 事件委托：绑定在页面加载时就存在的表格父节点上监听input事件，适配动态新增行
$('table').on('input', 'input', function() {
  // 定位当前输入框所属的表格行
  const $currentRow = $(this).closest('tr');
  
  // 仅当当前行存在输入框时执行逻辑
  if ($currentRow.find('input').length) {
    const firstColInputVal = $currentRow.find('td:eq(0) input[type="text"]').val();
    // 注意：if末尾不要加分号
    if (equation[j] === firstColInputVal) {
      p2 = equation[j];
      // 所有取值都从当前行节点下查找，不会串到其他行
      var1[1] = $currentRow.find('td:eq(1) input[type="number"]').val();
      var2[1] = $currentRow.find('td:eq(2) input[type="text"]').val();

      // 算术运算前记得把字符串类型的输入值转成数字，避免字符串拼接错误
      // 示例：const calcResult = Number(var1[1]) + Number(var2[1])
    }
  }
})

• 查找元素时避免多层嵌套find，直接在确定的上下文节点下写组合选择器即可，减少性能损耗也降低写错概率。
• 从input取到的默认值是字符串类型，做加减乘除运算前必须用Number()、parseFloat()等方法转成数值类型，否则会出现1+2=12这类异常结果。
• 动态生成的元素不要直接用$('input').on(...)绑定事件，必须用上面代码展示的事件委托写法，绑定到页面加载时就已经存在的父级节点上，否则后续新增的输入框不会触发绑定的逻辑。

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