如何用同一个按钮实现表格行的启用/禁用切换？

步骤1：修正并调整HTML结构 #

先把你原代码里的标签闭合错误（<th>用了</td>闭合）改掉，再给按钮加个统一类名方便后续操作：

<table>
  <tr>
    <th>Value1</th>
    <th>Value2</th>
    <th>
      <input type="button" class="toggle-btn" value="enable" />
    </th>
  </tr>
  <tr>
    <th>Value3</th>
    <th>Value4</th>
    <th>
      <input type="button" class="toggle-btn" value="enable" />
    </th>
  </tr>
</table>

步骤2：添加CSS样式 #

定义禁用状态下的行样式，点击后给目标行添加这个类即可：

.disabled-row {
  background-color: #ff4444; /* 整行设置红色背景 */
  color: #fff; /* 可选：把文字变白，提升可读性 */
}

步骤3：编写JavaScript逻辑 #

给每个按钮绑定点击事件，实现行样式和按钮文本的切换：

// 获取所有切换按钮
const toggleBtns = document.querySelectorAll('.toggle-btn');

toggleBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 找到当前按钮所在的表格行
    const targetRow = this.closest('tr');
    // 切换行的禁用样式类
    targetRow.classList.toggle('disabled-row');
    // 切换按钮显示文本
    this.value = this.value === 'enable' ? 'disable' : 'enable';
  });
});

效果说明 #

• 初始状态按钮显示“enable”，点击后对应行变红，按钮文本变为“disable”
• 再次点击“disable”按钮，行样式恢复默认，按钮文本变回“enable”

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