html - 如何使表格行跳入？

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>');