如何使表行跳进去？

Question

我正在一个网页上工作，该网页将包含每周交易的列表。

我希望它的工作方式是拥有一个交易列表，当您点击它时，该周的更多详细信息将显示在它下面。

我希望它像表格一样呈现，但我想要详细信息如下：

所以当我点击第三行时，详细信息会显示如下。我遇到的具体问题是让详细的行跳进来。

非常感谢任何想法。

Answer 1

我认为你可以使用其他桌面的TD与Colspan，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>');