使用JSON预填充表格后，追加</tr>标签无法新增行求助

看起来你遇到的核心问题是手动拼接HTML标签时，DOM解析或渲染逻辑自动补全/重复添加了</tr>标签，导致表格结构混乱。这通常是因为直接操作HTML字符串时破坏了表格的DOM结构规则，或者渲染逻辑本身会自动生成闭合标签，和你手动添加的内容冲突。

下面给你几个靠谱的解决方案，从根源上避免标签异常：

1. 给JSON数据添加折叠标识，渲染时动态生成折叠行 #

不要手动修改已生成的HTML，而是在源数据里标记需要折叠的行，渲染表格时自动插入折叠内容的行。这种方式最可控，不会出现标签冲突。

示例代码（原生JS） #

假设你的JSON数据结构如下，新增hasCollapse和collapseContent字段：

const tableData = [
  { id: 1, title: "基础配置", hasCollapse: true, collapseContent: "这里是基础配置的详细说明，比如参数A：xxx，参数B：yyy" },
  { id: 2, title: "高级配置", hasCollapse: false },
  { id: 3, title: "扩展功能", hasCollapse: true, collapseContent: "扩展功能包含API调用、自定义脚本等模块" }
];

然后用DOM操作而非字符串拼接来渲染表格：

function renderTable(data) {
  const tbody = document.querySelector("#target-table tbody");
  tbody.innerHTML = ""; // 清空原有内容

  data.forEach(item => {
    // 渲染普通数据行
    const dataRow = document.createElement("tr");
    dataRow.innerHTML = `
      <td>${item.id}</td>
      <td>${item.title}</td>
    `;
    tbody.appendChild(dataRow);

    // 如果需要折叠内容，渲染折叠行
    if (item.hasCollapse) {
      const collapseRow = document.createElement("tr");
      // 用colspan让折叠内容跨所有列，避免布局错乱
      collapseRow.innerHTML = `
        <td colspan="2">
          <details>
            <summary>点击展开/收起详情</summary>
            <div class="collapse-content">${item.collapseContent}</div>
          </details>
        </td>
      `;
      tbody.appendChild(collapseRow);
    }
  });
}

// 调用渲染
renderTable(tableData);

2. 避免直接拼接HTML字符串，用框架模板条件渲染 #

如果是用Vue/React等框架，直接利用模板的条件渲染能力，完全不用手动操作标签：

Vue示例 #

<template>
  <table>
    <tbody>
      <tr v-for="item in tableData" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.title }}</td>
      </tr>
      <!-- 条件渲染折叠行 -->
      <tr v-for="item in tableData" :key="`collapse-${item.id}`" v-if="item.hasCollapse">
        <td colspan="2">
          <details>
            <summary>查看详情</summary>
            <p>{{ item.collapseContent }}</p>
          </details>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, title: "基础配置", hasCollapse: true, collapseContent: "基础配置详情..." },
        // ... 其他数据
      ]
    }
  }
}
</script>

为什么手动加</tr>会出问题？ #

当你尝试手动给已渲染的表格追加</tr>时，浏览器的DOM解析器会自动补全不完整的HTML结构。比如如果原有渲染逻辑已经生成了完整的<tr>...</tr>，你手动插入额外的</tr>，浏览器会认为这是冗余标签，可能自动补全对应的<tr>，或者调整DOM结构，导致出现多余的行或标签异常。

另外，很多表格渲染库（比如DataTables）会自动管理表格的DOM结构，手动修改HTML会破坏其内部状态，也会导致标签异常。

额外注意事项 #

• 折叠行一定要设置colspan，值等于表格的列数，否则会出现布局错乱。
• 用原生的<details>和<summary>标签实现折叠，无需额外JS，兼容性好（IE不支持，不过现在IE基本淘汰了）。如果需要兼容旧浏览器，可以用JS模拟折叠逻辑。

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