如何通过单个按钮点击展开多个表格<tr>元素

首先修正核心问题：HTML中id属性必须唯一，你之前重复使用id="hide"会导致getElementById只作用于第一个匹配元素，所以只有第一行能切换显示状态。下面是修改后的完整实现：

修改后的JavaScript代码 #

function toggleTable() {
  // 获取所有需要切换的表格行
  const toggleRows = document.querySelectorAll('.toggle-row');
  // 遍历每一行切换显示状态
  toggleRows.forEach(row => {
    if (row.style.display === 'none') {
      row.style.display = 'table-row';
    } else {
      row.style.display = 'none';
    }
  });
}

修改后的HTML代码 #

<h2>产品对比表格</h2>
<div>
  <table>
    <tbody>
      <tr>
        <td>基础参数</td>
        <td>信息</td>
      </tr>
      <tr>
        <td>基础参数</td>
        <td>信息</td>
      </tr>
      <!-- 用class替代重复id -->
      <tr class="toggle-row" style="display:none;">
        <td>扩展规格</td>
        <td>详情</td>
      </tr>
      <tr class="toggle-row" style="display:none;">
        <td>扩展规格</td>
        <td>详情</td>
      </tr>
    </tbody>
  </table>
</div>
<button type="button" onclick="toggleTable()">显示/隐藏扩展规格 ▼</button>

关键说明 #

• 使用document.querySelectorAll('.toggle-row')获取所有需要切换的行，它会返回所有匹配该类名的元素集合
• 通过forEach遍历集合，逐个切换每一行的display状态
• 保留table-row作为显示状态的值，确保表格布局不会错乱

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