如何在循环生成tbody的表格中通过按钮获取上级输入框值？

嘿，这个场景太常见了！动态循环生成的表格行没法用唯一ID，不过咱们用DOM遍历或者事件委托就能完美解决，给你两种实用方案：

方案一：利用DOM层级关系遍历（推荐） #

这种方法不需要额外标记，直接通过按钮找到所在的表格行，再在该行内定位输入框。核心思路是用closest()找到当前按钮所在的<tr>，然后用querySelector()在该行里筛选输入框。

示例代码： #

假设你的表格结构大概是这样（循环生成的tbody）：

<table>
  <thead>
    <tr>
      <th>输入内容</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 循环生成的行 -->
    <tr>
      <td><input type="text" class="row-input" placeholder="输入内容"></td>
      <td><button class="get-value-btn">获取值</button></td>
    </tr>
    <tr>
      <td><input type="text" class="row-input" placeholder="输入内容"></td>
      <td><button class="get-value-btn">获取值</button></td>
    </tr>
  </tbody>
</table>

对应的JavaScript（用事件委托处理动态元素）：

// 给document绑定点击事件，监听按钮点击
document.addEventListener('click', function(e) {
  // 判断点击的元素是目标按钮
  if (e.target.classList.contains('get-value-btn')) {
    // 找到按钮所在的表格行
    const currentRow = e.target.closest('tr');
    // 在该行内找到输入框并获取值
    const inputValue = currentRow.querySelector('.row-input').value;
    
    console.log('当前行输入框的值：', inputValue);
    // 这里可以做后续处理，比如提交、验证等
  }
});

这种方法的好处是不依赖额外的属性，只要DOM结构稳定就没问题，而且事件委托能自动处理后续新增的表格行。

方案二：用data属性关联元素 #

如果你的DOM结构可能有变动，或者想更清晰地关联按钮和输入框，可以给每行的元素添加相同的data-*属性，通过这个属性来匹配对应的输入框。

示例代码： #

修改表格结构，给行、输入框、按钮添加相同的data-row-id：

<table>
  <thead>
    <tr>
      <th>输入内容</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 循环生成时给每行分配唯一的row-id，比如从后端返回的ID或者循环索引 -->
    <tr data-row-id="1">
      <td><input type="text" class="row-input" data-row-id="1" placeholder="输入内容"></td>
      <td><button class="get-value-btn" data-row-id="1">获取值</button></td>
    </tr>
    <tr data-row-id="2">
      <td><input type="text" class="row-input" data-row-id="2" placeholder="输入内容"></td>
      <td><button class="get-value-btn" data-row-id="2">获取值</button></td>
    </tr>
  </tbody>
</table>

对应的JavaScript：

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('get-value-btn')) {
    // 获取按钮的data-row-id
    const rowId = e.target.dataset.rowId;
    // 通过data-row-id找到对应的输入框
    const targetInput = document.querySelector(`.row-input[data-row-id="${rowId}"]`);
    const inputValue = targetInput.value;
    
    console.log('当前行输入框的值：', inputValue);
  }
});

这种方法更灵活，哪怕DOM结构调整，只要data-row-id匹配就能找到对应元素，适合结构复杂的表格。

两种方案都能解决你的问题，根据自己的场景选就行～

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