如何用原生JavaScript和CSS实现点击按钮切换显隐相邻表格行

云上老周

2026-9-26

实现方案

1. 新增CSS样式

在你原有CSS的基础上补充显隐控制的样式：

/* 原有样式保留，可补充border-collapse让边框更美观 */
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
/* 区间行默认隐藏样式 */
.toggle-row {
  display: none;
}
/* 区间行显示样式 */
.toggle-row.show {
  display: table-row;
}

2. 编写原生JavaScript逻辑

不需要修改你提供的原有HTML结构，直接添加以下JS代码即可：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有表格按钮和所有行
  const toggleBtns = document.querySelectorAll('table button');
  const allRows = Array.from(document.querySelectorAll('table tr'));

  // 初始化：给所有按钮行之间的区间行添加默认隐藏类
  let inToggleRange = false;
  allRows.forEach(row => {
    const hasBtn = !!row.querySelector('button');
    if (hasBtn) {
      inToggleRange = true;
      return;
    }
    if (inToggleRange) row.classList.add('toggle-row');
  });

  // 绑定按钮点击事件
  toggleBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      const currentRow = this.closest('tr');
      let nextRow = currentRow.nextElementSibling;

      // 遍历后续行，直到遇到下一个带按钮的行停止
      while(nextRow) {
        if (nextRow.querySelector('button')) break;
        nextRow.classList.toggle('show');
        nextRow = nextRow.nextElementSibling;
      }

      // 可选：切换按钮文本提示，不需要可以删掉下面这行
      this.textContent = this.textContent.includes('show') ? 'hide' : 'show/hide';
    });
  });
});