HTML 钻取表：设计

我试图找出根据标签构建 HTML 钻取表的最佳方法。它必须简单，但最重要的是它应该符合逻辑。

关于如何做到这一点是否有任何首选标准？你会推荐什么？

一种可能的解决方案是'colspan'.

<tbody>
<tr><td> + </td><td>Summery row 1</td><td>Summery row 1</td></tr>
<tr><td> + </td><td>Summery row 2</td><td>Summery row 2</td></tr>
<tr style=hidden><td colspan=3>drilldown data goes here...</td></tr>
</tbody>

另一种解决方案是'tbody':

<tbody>
<tr><td> + </td><td>Summery row 1</td><td>Summery row 1</td></tr>
<tr><td> + </td><td>Summery row 2</td><td>Summery row 2</td></tr>
</tbody>
<tbody id=DrilldownDataOfRow2 style=hidden>
<tr><td></td><td>drilldown data goes here...</td></tr>
</tbody>

实际上我必须为客户做类似的事情。如前所述，您可以拥有多个tbody and thead标签，您可以使用它对数据进行逻辑分组。这thead在这种情况下将是“连接器”。

<table>
  <thead>
    <tr>Summary Row
  <tbody>
    <tr>Dropdown Rows / Data
  <thead>
    <tr>Summary Row
  <tbody>
    <tr>Dropdown Rows / Data

它很简单，但你明白了。结构变得更有条理，你可以用 js 做更多的事情。

我创建了一个jsFiddle http://jsfiddle.net/zGRSF/与我在项目中使用的方法。