HTML下钻表:设计

Question

我正在尝试找出根据标记构建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>

Answer 1

我实际上不得不为客户做类似的事情.如上所述,您可以使用多个tbody和thead标记,这些将用于逻辑分组数据.在thead这种情况下将是"连接器".

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

这是简化但你明白了.结构变得更有条理,你可以用js做更多的事情.

我用我在项目中使用的方法创建了一个jsFiddle.