HTML下钻表格：设计 [英] HTML drilldown table: Design

问题描述

我试图找出根据标签构建HTML深入表的最佳方法。它需要很简单，但最重要的是它应该合乎逻辑。

I'm trying to figure out the best way to construct a HTML drilldown table in terms of tags. It needs to be simple but most important it should be logical.

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

Is there any preferred standard on how to do this? What would you recommend?

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

One possible solution would be '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 '：

another solution would be '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 应该是'connector'。

I actually had to do something similar for a client. As noted, you're allowed to have multiple tbody and thead tags which is what you would use to logically group your data. The thead in this case would be the 'connector'.

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

简化了您的想法。结构变得更加有组织，你可以用js做更多事情。

It's simplified but you get the idea. The structure becomes more organized and you can do much more with it with js.

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

I created a jsFiddle with the approach I used on my project.

这篇关于HTML下钻表格：设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！