html - テーブルの行をジャンプさせる方法は？

Question

私は毎週の取引のリストを含む予定のウェブページに取り組んでいます。

私がそれを機能させたいのは、トランザクションのリストを用意することです。それをクリックすると、その週のより詳細な情報がそのすぐ下に表示されます。

表のように表示したいのですが、詳細情報を次のように表示したいと思います。

したがって、3行目をクリックすると、詳細情報が次のように表示されます。私が抱えている特定の問題は、詳細な行をジャンプさせることです。

どんなアイデアでも大歓迎です。

Answer 1

コルスパンのあるTDの中で、TRのダウンの他のテーブルを使用できると思います。CSSを使用して境界線を作成できます。

例えば：

<table style="border:1px solid #000; border-collapse:collapse;">
    ..
    <tr>
            <Td>Info 2 1 </Td>
            <Td>Info 2 2 </Td>
            <Td>Info 2 3 </Td>
            <Td>Info 2 4 </Td>
    </tr>
    <tr>
            <td  style="border:0px solid #FFF;">
                 <table style="border:0 0 0 50px; border:1px solid #000; border-collapse: collapse;">
                     <tr>
                          <td>Detail title 1</td>
                          <td>Detail title 2</td>
                          <td>Detail title 3</td>
                     </tr>
                 </table>
            </td>
    </tr>
    <tr>
            <td>Info 2 1 </td>
            <td>Info 2 2 </td>
            <td>Info 2 3 </td>
            <td>Info 2 4 </td>
    </tr>
    ..
<table>

この内部テーブルを動的に作成するには、Jqueryのコマンド「After」を使用できます。例えば：

$('#TR_Selected').after('<tr><td colspan="4"><table> ...</table></td></tr>');