如何在JavaScript中获取表格同行列对象引用并控制输入框禁用状态

没问题，我来帮你搞定这个需求，同时给你讲清楚怎么在JS里获取同一行的其他元素。先给你看完整的可运行代码，再拆解关键逻辑：

<!DOCTYPE html>
<html>
<body>
  <p>Check the checkbox to enable the number input in the same row.</p>
  <table border='1' cellpadding='5'>
    <tr>
      <td>Item1</td>
      <td><input type="checkbox" onclick="myFunction(this)"></td>
      <td><input type='number' disabled></td>
    </tr>
    <tr>
      <td>Item2</td>
      <td><input type="checkbox" onclick="myFunction(this)"></td>
      <td><input type='number' disabled></td>
    </tr>
    <tr>
      <td>Item3</td>
      <td><input type="checkbox" onclick="myFunction(this)"></td>
      <td><input type='number' disabled></td>
    </tr>
  </table>

  <script>
    function myFunction(checkbox) {
      // 获取当前checkbox所在的表格行
      const row = checkbox.closest('tr');
      // 获取该行第三列的input元素
      const numberInput = row.querySelector('td:nth-child(3) input');
      
      // 根据checkbox的勾选状态设置input的禁用状态
      numberInput.disabled = !checkbox.checked;
    }
  </script>
</body>
</html>

核心逻辑拆解 #

• 获取当前元素所在的表格行
  当你给checkbox绑定onclick="myFunction(this)"时，this就代表当前被点击的checkbox元素。要找到它所在的行，最稳妥的方法是用closest('tr')——这个方法会向上查找最近的<tr>父元素，比一层层写parentElement.parentElement更健壮，哪怕DOM结构有小改动也不会出错。

• 定位同一行的目标Input
  拿到行元素row后，用querySelector就能精准定位第三列的input：

  • td:nth-child(3)表示选中该行的第三个<td>单元格
  • 后面加 input就是选中这个单元格里的input元素

  你也可以用row.getElementsByTagName('input')[1]（因为每行有两个input，第二个就是第三列的那个），但querySelector可读性更强，也更灵活。

• 控制Input的禁用状态
  直接把input的disabled属性设为!checkbox.checked就搞定了：勾选时checkbox.checked是true，所以!true等于false，input启用；取消勾选时checkbox.checked是false，!false等于true，input禁用。

进阶优化（可选） #

如果想让代码更易维护，推荐用addEventListener绑定事件，而不是内联的onclick，这样HTML和JS代码分离，比如：

// 页面加载完成后绑定所有checkbox的点击事件
document.addEventListener('DOMContentLoaded', function() {
  const checkboxes = document.querySelectorAll('table input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('click', function() {
      const row = this.closest('tr');
      const numberInput = row.querySelector('td:nth-child(3) input');
      numberInput.disabled = !this.checked;
    });
  });
});

这样就不需要在HTML里写onclick属性了，代码结构更清晰。

内容的提问来源于stack exchange，提问作者j. dot