表格內部組件的結構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/

如果你想顯示在表本身的內容，這裏提供一些想法關於你想如何顯示內容