структура компонента внутри таблицы 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

Вы можете использовать всплывающее окно рядом со ссылкой "Показать подробности". Пример : http://jsfiddle.net/vdcUA/93/

Если вы хотите, чтобы контент отображался в самой таблице, предоставьте здесь некоторое представление о том, как вы хотите, чтобы контент отображался

Answer 3

В вашем примере у вас есть лишний лишний <tr> перед вашим циклом. Вы должны иметь стандартную структуру таблицы, но скрывать / показывать детали в зависимости от клика.

Вам лучше использовать:

• стиль с CSS и классы, стандартный ряд и детали
• использование js для скрытия / отображения строк

На самом деле, вы можете использовать jquery плагины для такого рода вещей. См. Этот пример строк группировки данных

Jqgrid также может сделать некоторую группировку строк

[РЕДАКТИРОВАТЬ] Самый простой способ определить структуру HTML - это получить вдохновение от HTML в этих примерах плагинов jquery