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和thead标记,这些标记用于对数据进行逻辑分组.在这种情况下,thead将是’连接器’.

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

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

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

相关文章
相关标签/搜索