表格内部组件的结构html

Question

我想制作一个订单表，每行都有一个箭头，显示与每个订单相关的单据详细信息，并在再次点击按钮时隐藏。

我该如何制作表格的结构？

我作出这样

<table id="customerTable"> 
<thead> 
     <tr> 
     <td>customer name </td> 
     <td>order date</td> 
     <td>sale point</td> 
     <td>total</td> 
     </tr> 
</thead> 

    <tr> 
     <td>customer name </td> 
     <td>order date</td> 
     <td>sale point</td> 
     <td>total</td> 
      <td><a href="">show details</a></td> 
     </tr> 

//also loop here as the number of bills 
    <tr> 
    <td>bill order/td> 
    <td>product</td> 
    <td>price</td> 
    </tr> 

我不认为这样的结构是正确的，并制作表格中DIV不工作，任何建议吗？

Answer 1

可能的结构：

<table id="customerTable"> 
    <thead> 
     <tr> 
      <td>customer name </td> 
      <td>order date</td> 
      <td>sale point</td> 
      <td>total</td> 
      <td></td> 
     </tr> 
    </thead> 

    <tbody> 
     <tr class="master"> 
      <td>customer name </td> 
      <td>order date</td> 
      <td>sale point</td> 
      <td>total</td> 
      <td> 
       <a href="">show details</a> 
      </td> 
     </tr> 

     <tr class="detail"> 
      <td colspan=5> 
       <!-- new <table> with your details of this row --> 
      </td> 
     </tr> 

     <!-- ... more rows ... ---> 
    </tbody> 
</table> 

实施例：http://jsfiddle.net/J7szf/

例2：http://jsfiddle.net/J7szf/1/

Answer 2

在你的例子中，你的循环之前有一个额外的不需要的<tr>。你应该有一个标准的表格结构，但隐藏/显示细节取决于点击。

你最好使用：

• 造型与CSS和类标准行和细节
• 使用JS来隐藏/显示行

其实，你可以使用jQuery插件做这种东西。见datatables grouping rows

的jqGrid的这个例子也可以做一些row grouping

[编辑]定义你的HTML结构最简单的方法是让来自HTML这些jQuery插件的例子启发

Answer 3

你或许可以使用弹出附近的“显示详细信息”链接 例：http://jsfiddle.net/vdcUA/93/

如果你想显示在表本身的内容，这里提供一些想法关于你想如何显示内容