JavaScript表格总控展开/折叠失效及子项显示异常问题求助

问题1：tbody选择器无法正常工作 #

你当前的targetSection.querySelectorAll('tbody')选不到目标元素，核心原因是targetSection指向错误——比如它是表头所在的<tr>或<thead>，而这些元素内部根本不存在<tbody>子元素。

修正步骤 #

1. 给所有子项对应的<tbody>统一添加类名（比如.vo-sub-section），确保精准筛选目标分组：

   <tbody class="vo-sub-section">
     <!-- VO-002等子项内容 -->
   </tbody>
   

2. 先获取总控表头所在的表格元素，再从表格范围内选择所有目标子项tbody：

   // 假设总控表头的id是vo-main-header
   const mainHeader = document.getElementById('vo-main-header');
   const parentTable = mainHeader.closest('table');
   const subSections = parentTable.querySelectorAll('.vo-sub-section');
   

问题2：二次点击出现额外子项、顺序错乱 #

你用targetSection.style.display = 'table-row-group'的逻辑存在错误——如果targetSection是表头元素，给它设置table-row-group（这是<tbody>的默认display属性值）会破坏表格原生布局，导致浏览器渲染出无效的额外行。

修正步骤 #

1. 给总控表头添加状态类标记，用来记录当前展开/折叠状态，避免重复操作：

   mainHeader.addEventListener('click', function() {
     // 切换状态类
     this.classList.toggle('expanded');
     const isExpanded = this.classList.contains('expanded');
     
     // 批量设置所有子项的显示状态
     subSections.forEach(section => {
       section.style.display = isExpanded ? 'table-row-group' : 'none';
     });
   });
   

2. 禁止在点击事件中动态添加<tbody>元素，所有子项分组必须是初始HTML中已存在的节点，仅通过切换display状态实现展开/折叠。
3. 若子项是嵌套在某个tbody内部的行，需调整选择器，确保选中的是真正的子项行，而非错误层级的元素。

完整场景示例 #

HTML结构 #

<table>
  <thead>
    <tr>
      <th id="vo-main-header" colspan="3">2.0 Variation Order</th>
    </tr>
  </thead>
  <!-- 子项分组1 -->
  <tbody class="vo-sub-section">
    <tr class="vo-item-header">
      <td>VO-002</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr class="vo-item-content">
      <td colspan="3">VO-002详情内容...</td>
    </tr>
  </tbody>
  <!-- 子项分组2 -->
  <tbody class="vo-sub-section">
    <tr class="vo-item-header">
      <td>VO-003</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr class="vo-item-content">
      <td colspan="3">VO-003详情内容...</td>
    </tr>
  </tbody>
</table>

JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
  const mainHeader = document.getElementById('vo-main-header');
  const parentTable = mainHeader.closest('table');
  const subSections = parentTable.querySelectorAll('.vo-sub-section');

  // 初始化：默认折叠所有子项分组
  subSections.forEach(section => {
    section.style.display = 'none';
    // 同时折叠单个子项的详情行
    section.querySelector('.vo-item-content').style.display = 'none';
  });

  // 总控表头点击事件
  mainHeader.addEventListener('click', function() {
    this.classList.toggle('expanded');
    const isExpanded = this.classList.contains('expanded');
    
    subSections.forEach(section => {
      section.style.display = isExpanded ? 'table-row-group' : 'none';
    });
  });

  // 单个子项的展开/折叠逻辑（保留你已实现的功能）
  const itemHeaders = parentTable.querySelectorAll('.vo-item-header');
  itemHeaders.forEach(header => {
    header.addEventListener('click', function() {
      const contentRow = this.nextElementSibling;
      contentRow.style.display = contentRow.style.display === 'none' ? 'table-row' : 'none';
    });
  });
});

关键注意事项 #

• 严格遵循表格规范：一个<table>内仅允许有一个<thead>、一个<tfoot>，可包含多个<tbody>，禁止嵌套表格（极易引发布局混乱）。
• 优先用类名定位元素，避免直接用标签选择器，防止误选无关的<tbody>。
• 依赖类名判断状态，不要用inline style的display值（初始状态可能无inline style，判断逻辑会失效）。

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