jQuery AcollapTable是一種可折疊表格。它使用jQuery和CSS實現,可以幫助您輕松地隱藏或顯示您的表格內容。
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery.acollapTable.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.acollapTable.css">
首先,您需要下載jQuery庫以及jQuery AcollapTable插件。然后,您需要在HTML頁面中添加這些JS和CSS文件。在表格中添加一些特定的HTML標記,以指示哪些行應該折疊。
<table class="my-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse">
<td>John</td>
<td>25</td>
</tr>
<tr class="collapse-body">
<td colspan="2">John is a software developer.</td>
</tr>
<tr data-toggle="collapse">
<td>Mary</td>
<td>30</td>
</tr>
<tr class="collapse-body">
<td colspan="2">Mary is a project manager.</td>
</tr>
</tbody>
</table>
在這個示例中,我們使用了"data-toggle"屬性來指示哪些行應該折疊。我們還添加了類名"collapse-body"來標識應該折疊的內容。您可以在"data-toggle"屬性中使用其他值來自定義折疊行為和內容。
$(document).ready(function() {
$('.my-table').acollapTable({
startCollapsed: true
});
});
最后,在您的jQuery代碼中使用acollapTable()來啟用可折疊表格。通過設置“startCollapsed”選項為true,可以使表格一開始就處于折疊狀態。
通過使用jQuery AcollapTable,您可以幫助用戶更輕松地閱讀和理解表格中的數據。