如何在HTML表格第三列input的onblur事件中获取第二列input的值？

我帮你排查了代码里的问题，核心原因是你在sum_cr()函数里查找ACNO列输入框的方式不对——用document.querySelector会找到页面上第一个符合条件的input，而不是触发blur事件的输入框所在行的那个，自然拿不到正确的值。咱们这么改就搞定了：

步骤1：修改onblur绑定，传递当前元素 #

把第三列（CREDIT）input的onblur属性改成带当前元素的参数：

<input type="text" headers="CREDIT" onblur="sum_cr(this)">

步骤2：修正sum_cr函数逻辑 #

在函数里从当前触发事件的input出发，定位到所在行，再在该行内查找目标输入框：

function sum_cr(currentInput) {
  // 获取当前输入框所在的表格行
  const currentRow = currentInput.closest('tr');
  // 在当前行内精准查找headers为ACNO的输入框
  const acnoInput = currentRow.querySelector('input[headers="ACNO"]');
  
  if (acnoInput) {
    const acnoValue = acnoInput.value;
    console.log("当前行ACNO的值：", acnoValue);
    // 这里可以添加你的求和或其他业务逻辑
  } else {
    console.warn("未找到当前行的ACNO输入框");
  }
}

更优雅的方案：事件委托（推荐） #

如果你的表格行是动态添加的，或者不想给每个input都绑定onblur，用事件委托更灵活：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 找到你的表格（如果有id可以用getElementById更精准）
  const table = document.querySelector('table');
  
  table.addEventListener('blur', function(e) {
    const target = e.target;
    // 只处理CREDIT列的input触发的blur事件
    if (target.tagName === 'INPUT' && target.getAttribute('headers') === 'CREDIT') {
      const currentRow = target.closest('tr');
      const acnoInput = currentRow.querySelector('input[headers="ACNO"]');
      
      if (acnoInput) {
        console.log("当前行ACNO的值：", acnoInput.value);
        // 执行你的业务逻辑
      }
    }
  }, true);
});

这种方式不需要给每个input写onblur属性，后续新增的行也能自动生效。

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