如何让表格子tr在父tr下方折叠？本地预览异常求助

看起来你遇到了一个很典型的本地环境与在线编辑器渲染差异的问题，我来帮你分析并解决它：

可能的问题根源 #

1. jQuery未引入：你的JS代码依赖jQuery，但本地编辑器大概率没有像JSFiddle那样默认加载jQuery库，导致点击事件完全不生效，折叠逻辑失效后，浏览器可能以自己的方式渲染隐藏的行，进而出现错位。
2. 表格结构分组缺失：原生表格对display: none的<tr>渲染时，部分浏览器/编辑器可能会打乱行的原有顺序，尤其是没有明确分组的情况下。
3. CSS选择器冗余且不通用：你给每个行头和详情行都加了独特的类（rowheader1、projectinfo1等），不仅代码冗余，也增加了渲染时出错的概率。

修复方案 #

1. 确保本地引入jQuery #

在你的HTML代码末尾（</body>标签前）添加jQuery的引入脚本：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

2. 优化表格结构（用<tbody>分组） #

把每个行头和对应的详情行放在独立的<tbody>里，这样浏览器渲染时会保持分组内的行顺序，不会错位：

<table>
  <tbody id="mainTableBody" class="topborder" aria-live="polite" aria-relevant="all">
    <!-- 第一组 -->
    <tbody class="project-group">
      <tr class="rowheader">
        <td>1</td>
        <td>Curating</td>
        <td>The Book Affair</td>
        <td>Automatic Books</td>
        <td>2009</td>
      </tr>
      <tr class="projectinfo">
        <td></td>
        <td class="align-top">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi!</td>
        <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi!</td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
    <!-- 第二组 -->
    <tbody class="project-group">
      <tr class="rowheader">
        <td>2</td>
        <td>Project Management</td>
        <td>Fragile?</td>
        <td>Pentagram Stiftung</td>
        <td>2013</td>
      </tr>
      <tr class="projectinfo">
        <td></td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </tbody>
</table>

3. 简化CSS和JS代码 #

优化后的CSS：

body { padding:0; margin: 0; }
.rowheader { 
  display: table-row; 
  border-bottom: none !important;
  cursor: pointer; /* 加上这个让行头看起来可点击 */
}
.projectinfo { display: none; }

优化后的JS（通用化，支持任意数量的行）：

$(".rowheader").click(function() {
  // 只切换当前行头后面的详情行
  $(this).next(".projectinfo").toggle();
});

为什么这样能解决问题？ #

• 用<tbody>分组后，浏览器会把每个组视为独立的表格片段，切换详情行的显示状态时，不会打乱整体的行顺序。
• 通用的类选择器和JS逻辑避免了重复代码，也减少了因类名冗余导致的渲染错误。
• 明确引入jQuery确保了折叠逻辑能正常运行，不会因为依赖缺失导致功能失效。

内容的提问来源于stack exchange，提问作者Kip de Vijg