如何让不同按钮为各自所在行执行同一个函数？

咱们先聊聊你原来代码的问题：你用了getElementById来获取元素，但ID在整个页面里是唯一的，所以不管点哪个按钮，永远只会操作第一个匹配到的元素，这就是为啥多个按钮没效果的原因。

下面给你两种实用的解决方法，你可以根据自己的需求选：

方法一：直接传递对应元素（简单直观） #

这种方法适合页面结构固定的场景，咱们把原来的ID改成类名，然后在按钮点击时，把对应的目标元素传给函数：

修改后的HTML #

<table>
  <tr>
    <td><input type="button" value="点击切换" onclick="toggleStatus(this.parentElement.querySelector('.status-btn'))"></td>
    <td><input type="text" class="status-btn" value="OUT" style="background-color: rgb(255,0,0)"></td>
  </tr>
  <tr>
    <td><input type="button" value="点击切换" onclick="toggleStatus(this.parentElement.querySelector('.status-btn'))"></td>
    <td><input type="text" class="status-btn" value="OUT" style="background-color: rgb(255,0,0)"></td>
  </tr>
</table>

修改后的JS #

function toggleStatus(elem) {
  // 切换文字
  if (elem.value === "OUT") {
    elem.value = "IN";
  } else {
    elem.value = "OUT";
  }
  // 切换背景色
  if (elem.style.backgroundColor === "rgb(255, 0, 0)") {
    elem.style.backgroundColor = "rgb(26, 255, 0)";
  } else {
    elem.style.backgroundColor = "rgb(255, 0, 0)";
  }
}

这里的关键是this.parentElement.querySelector('.status-btn')：this指的是当前点击的按钮，通过它找到所在单元格里的目标input，把这个元素传给函数，函数里直接操作这个传入的元素就行，每个按钮自然就对应自己那一行的元素了。

方法二：事件委托（更灵活，推荐） #

如果你的页面后续可能会动态新增行，用事件委托更合适——不用给每个按钮都绑定点击事件，只需要给它们的父元素绑定一次就行：

修改后的HTML #

<table id="status-table">
  <tr>
    <td><input type="button" value="点击切换" class="toggle-btn"></td>
    <td><input type="text" class="status-btn" value="OUT" style="background-color: rgb(255,0,0)"></td>
  </tr>
  <tr>
    <td><input type="button" value="点击切换" class="toggle-btn"></td>
    <td><input type="text" class="status-btn" value="OUT" style="background-color: rgb(255,0,0)"></td>
  </tr>
</table>

修改后的JS #

// 给表格绑定点击事件
document.getElementById('status-table').addEventListener('click', function(e) {
  // 先判断点击的是不是切换按钮
  if (e.target.classList.contains('toggle-btn')) {
    // 找到当前按钮所在行的status-btn
    const targetElem = e.target.closest('tr').querySelector('.status-btn');
    
    // 切换文字（用三元表达式更简洁）
    targetElem.value = targetElem.value === "OUT" ? "IN" : "OUT";
    // 切换背景色
    targetElem.style.backgroundColor = targetElem.style.backgroundColor === "rgb(255, 0, 0)" 
      ? "rgb(26, 255, 0)" 
      : "rgb(255, 0, 0)";
  }
});

这个方法的核心是利用事件冒泡：点击按钮时，事件会冒泡到表格上，我们通过e.target判断点击的是哪个元素，然后通过closest('tr')找到所在的行，再获取行里的目标input。就算以后新增行，只要结构不变，按钮自动就能生效，不用再写额外的绑定代码。

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