我正在尝试更新一些旧代码以替换旧页面中的一堆嵌套表。该页面动态生成“环境”列表,并且对于每个环境,该表都包含一个嵌套表,其中列出了该环境中的每个“项目”。我在用 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>