Table Javascript/JQuery渲染异常：表格行未正确嵌套于表格内

核心问题分析 #

你遇到的问题是DOM结构被浏览器自动补全：当你分片段插入表格标签（比如先插<table><thead>...</thead>，再插<tr>，最后插</table>）时，浏览器会在收到不完整的HTML时自动闭合标签，导致后续的数据行被放在表格外部，进而破坏手风琴的交互结构。

具体修复步骤 #

1. 先构建完整的表格框架，再填充数据行 #

不要拆分表格标签的插入，先创建包含<thead>和空<tbody>的完整表格，再将数据行插入到<tbody>中，最后把整个手风琴项（包含表格）一次性加入到#accordion-data容器。

示例代码：

// 按分类遍历数据集
dataset.forEach(category => {
  // 生成唯一ID用于手风琴折叠目标
  const collapseId = `collapse-${category.id}`;
  const tbodyId = `tbody-${category.id}`;

  // 创建完整的手风琴项HTML结构
  const accordionItem = document.createElement('div');
  accordionItem.className = 'accordion-item';
  accordionItem.innerHTML = `
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#${collapseId}">
        ${category.name}
      </button>
    </h2>
    <div id="${collapseId}" class="accordion-collapse collapse show">
      <div class="accordion-body">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>字段1</th>
              <th>字段2</th>
              <th>字段3</th>
            </tr>
          </thead>
          <tbody id="${tbodyId}"></tbody>
        </table>
      </div>
    </div>
  `;

  // 将手风琴项插入容器
  document.getElementById('accordion-data').appendChild(accordionItem);

  // 填充当前分类的数据行到tbody
  const tbody = document.getElementById(tbodyId);
  category.items.forEach(item => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${item.field1}</td>
      <td>${item.field2}</td>
      <td>${item.field3}</td>
    `;
    tbody.appendChild(row);
  });
});

2. 避免使用innerHTML拼接不完整的HTML #

如果之前的代码是类似container.innerHTML += '<table>';、container.innerHTML += '<tr>...</tr>';、container.innerHTML += '</table>';这种写法，立刻改掉——浏览器会在第一次插入<table>时就自动补全为<table></table>，后续的<tr>会被放在表格外面。

3. 确保手风琴组件在DOM完整后初始化 #

如果使用的是Bootstrap等框架的手风琴组件，要保证所有动态生成的DOM都插入到页面后，再初始化组件。如果是动态添加手风琴项，也可以在添加后重新初始化：

// 所有手风琴项插入完成后初始化
const accordionElement = document.getElementById('accordion-data');
new bootstrap.Accordion(accordionElement, {
  toggle: true
});

内容的提问来源于stack exchange，提问作者Jerome D'mello