使用HTML/Javascript的摺疊/展開表格

Question

我有一張非常大的表格，所以我需要一種展開它的方式，並且只展開它。

我該怎麼用HTML做到這一點？我需要Javascript嗎？如果是這樣，那麼這個代碼是什麼？

Answer 1

如果你會使用jQuery的你可以查看下面的代碼。

在CSS：

.collapsed-table tr { 
    display: none; 
} 

在HTML：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<table class="collapsed-table"> 
    <caption>Expand/collapce</caption> 
    <tr> 
     <td></td> 
    </tr> 
    .... 
</table> 

<script type="text/javascript"> 
$('.collapsed-table > caption').click(function() { 
    $(this).toggleClass('collapsed-table'); 
}) 
</script> 

Answer 2

保持標題（thead）始終可見，並在用戶單擊摺疊按鈕時切換正文（tbody）的可見性。

使用jQuery：

$('#foldbutton').click(function() 
{ 
$('tbody').toggle(); 
}); 

Answer 3

我知道這是一個老問題，但其他人可以有同樣的問題，沒有人提供了一個完整的解決方案，所以如果你想使用動畫來展開/展開某些東西，我開發了一個名爲TextShower的腳本，可以讓您做到這一點。它是高度可定製的，您可以自由編輯它的源代碼。希望這有助於:)