分组 tr 但浏览器过早关闭 tbody答案

【问题标题】：grouping tr but browser closes tbody prematurely分组 tr 但浏览器过早关闭 tbody
【发布时间】：2021-05-18 02:59:58
【问题描述】：

当使用 LitElement 动态呈现数据时，浏览器会一直插入 tbody，从而消除对表行“分组”的任何努力。

  render() {
    return html`
    <table style="border-collapse:collapse;border:solid 1px #666;">
      ${this.rows.map((row)=>{
        
        var disp= html`
        ${(row=="FOUR")?html`</tbody>`:''}
        ${(row=="TWO")?html`
          <tbody style="border:solid 2px #F00; border-collapse:separate;">
          <tr>
            <td>SOME HEADER</td>
          </tr>
        `:''}
        <tr>
          <td>${row}</td>
        </tr>
        `
        return disp;
      })}

    </table>
    `;
  } //render()

  constructor() {
    super();
    this.rows = ['ONE','TWO','THREE','FOUR'];
  }

结果是 tbody 在 "SOME HEADER" 的关闭 tr 之后立即关闭，而不是 tbody 在 tr "FOUR" 之后关闭，这是我们在这种情况下想要的。

看起来浏览器自己这样做是因为它总是想在将 tr 写入 DOM 时插入 tbody？所以我怀疑这会发生在任何动态呈现数据的框架上——但尚未验证这一点。
我认为这不会很快被“修复”。

既然如此，有人对在这种情况下如何将 tr 组合成一个块有什么建议吗？

谢谢！

【问题讨论】：

标签： dom lit-html html-tbody

【解决方案1】：

如果您在文档片段中有未关闭的<tbody>，浏览器会为您关闭它。

取而代之的是嵌套<tr>，你想在一个包含<tbody>和关闭</tbody>的模板中分组：

const groups = //process this.rows into groups

return html`
<table style="border-collapse:collapse;border:solid 1px #666;">
    ${groups.map(g => html`

    <tbody style="border:solid 2px #F00; border-collapse:separate;">
        <tr><th>${g.name}</th></tr>

        ${g.rows.map(r => html`
        <tr><td>${r}</td></tr>`)}

    </tbody>`)}
</table>`;

【讨论】：