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

问题描述

当使用 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 之后立即关闭，而不是在 tr "FOUR" 之后关闭 tbody，这正是我们在这种情况下想要的。

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

既然如此，在这种情况下，有人对如何将 tr 分组在一个块中提出建议吗？

谢谢！

解决方法

如果您在文档片段中有未关闭的 <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>`;