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

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

如果您希望内容显示在表格中，请在此处提供您希望如何显示内容的一些想法

Answer 3

在您的示例中，您在循环之前有一个额外不需要的<tr>。您应该有一个标准的表结构，但根据点击隐藏/显示详细信息。

你最好使用：

使用css和类设置样式标准行和详细信息
使用js隐藏/显示行

实际上，您可以使用jquery插件来执行此类操作。请参阅datatables grouping rows

的此示例

Jqgrid还可以制作一些row grouping

[编辑]定义HTML结构的最简单方法是从这些jquery插件示例中的HTML中获取灵感

表html中的组件结构

3 个答案: