如何解决分组 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>`;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。