用div分组tr标签真是个坏主意吗？

Question

我正在使用Backbone.js开发应用程序View类在渲染后返回一个元素.如果我使用div或span,这没关系.但是当我开始将对象渲染为tr行时,问题就开始了.一个对象应该渲染为2-3行.那么我可以使用这种结构吗？

<table>
    <div>
        <tr>...</tr>
        <tr>...</tr>

    </div>
</table>

Answer 1

表格标签内的div立即无效.改用tbody

Answer 2

是的,这是一个非常糟糕的主意.

HTML规范不允许div元素是表元素的子元素,因此它会在浏览器中触发错误恢复例程.

鉴于此输入:

<table>
  <tr><td>1</td></tr>
<div>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
</div>
  <tr><td>4</td></tr>
<div>
  <tr><td>5</td></tr>
  <tr><td>6</td></tr>
</div>

Firefox将生成的DOM(您可以通过使用Inspect Element功能看到这一点)将如下所示:

<div>
  </div><div>
  </div><table>
  <tbody><tr><td>1</td></tr>
<tr><td>2</td></tr>
  <tr><td>3</td></tr>

  <tr><td>4</td></tr>
<tr><td>5</td></tr>
  <tr><td>6</td></tr>

</tbody></table>

请注意,div元素已从表中删除并放在它之前.这使得它们无法用于操纵行.

HTML提供了thead,tfoot和tbody元素来对表行进行分组.使用适当的那些而不是div元素(你可以只有一个thead和一个tfoot,但tbody元素的数量没有限制).