0

我正在尝试更新一些旧代码以替换旧页面中的一堆嵌套表。该页面动态生成“环境”列表，并且对于每个环境，该表都包含一个嵌套表，其中列出了该环境中的每个“项目”。我在用 CSS 重写它时遇到了一些大麻烦（我主要是后端开发人员）。现有表格需要每个嵌套表格都是可折叠的，因此您首先只能看到每个嵌套表格的标题，然后通过单击加号 img 展开以查看正文。我知道这需要用多个列表来完成，我可以用 1 个表来做，但是嵌套表让我很生气。我更喜欢使用 jquery 进行折叠和排序。

这是表格外观的一些示例 html。请记住，这都是动态生成的，并且嵌套表需要是可折叠的。整个表应该是可排序的。

<table id='env' class='sortable-onload'>
  <thead>
     <tr>
      <th class='sortable'>Environment</th>
      <th class='sortable'>Description</th>
      <th class='sortable'>Status</th>
      <th class='sortable'>Items</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td><b>Dynamic link to environment details</b></td>
        <td>Dynamic Description</td>
        <td>Dynamic Status</td>
        <td>
            <table> 
                <thead>
                <th>
                    <td>Individual Items</td>
                    <td>Description</td>
                </th>
                </thead> //everything under this header should be collapsible 
                <tr>
                    <td id='item_id'>dynamic item name</td>
                    <td></td>
                </tr>
                <tr>
                    <td id='item_id'>dynamic item name</td>
                    <td></td>
                </tr>
                <tr>
                    <td id='item_id'>dynamic item name</td>
                    <td></td>
                </tr>
            </table>
    </tr>
    <tr>
        <td><b>Dynamic link to environment details</b></td>
        <td>Dynamic Description</td>
        <td>Dynamic Status</td>
        <td>
            <table>
                <thead>
                <th>
                    <td>Individual Items</td>
                    <td>Description</td>
                </th>
                </thead> //everything under this header should be collapsible 
                <tr>
                    <td id='item_id'>dynamic item name</td>
                    <td></td>
                </tr>
                <tr>
                    <td id='item_id'>dynamic item name</td>
                    <td></td>
                </tr>
                <tr>
                    <td id='item_id'>dynamic item name</td>
                    <td></td>
                </tr>
            </table>
    </tr>
    </tbody>
</table>
4

0 回答 0