点击表格内input字段时如何获取当前行全部input的value值

• 首先调整你现有HTML中的onclick调用，给doSomething传入当前触发点击的元素，修改所有input的onclick属性为：

onclick="doSomething(this)"

• 然后修改doSomething函数逻辑如下：

function doSomething(currentInput) {
  // 获取当前点击input所在的行元素<tr>
  const targetRow = currentInput.closest('tr')
  // 若需要兼容极低版本IE，可替换为 const targetRow = currentInput.parentNode.parentNode

  // 收集当前行所有input的value值
  const rowValues = Array.from(targetRow.querySelectorAll('input')).map(input => input.value)
  
  // 测试输出，点击值为44的input时，输出为 ['33', '44']
  console.log(rowValues)
}

• 如果你不想改动HTML的onclick属性，也可以直接通过事件监听绑定逻辑，完全去掉inline的onclick写法：

// 页面加载完成后绑定所有input的点击事件
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('table input').forEach(input => {
    input.addEventListener('click', function() {
      const targetRow = this.closest('tr')
      const rowValues = Array.from(targetRow.querySelectorAll('input')).map(input => input.value)
      console.log(rowValues)
    })
  })
})

这种写法不需要修改HTML里的onclick属性，更符合前端内容与逻辑分离的规范。

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