HTML/Javascript로 접기/펼치기 표

Question

나는 꽤 큰 표를 가지고 있으므로 항상 펼치고 펼쳐야합니다.

HTML로 어떻게 할 수 있습니까? 이것을 위해 자바 스크립트가 필요합니까? 그렇다면이 코드는 무엇입니까?

Answer 1

당신이 JQuery와 사용하는 경우 아래의 코드를 확인할 수 있습니다. CSS에서

:

HTML에서

.collapsed-table tr { 
    display: none; 
} 

:

<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이라는 스크립트를 작성하면됩니다. 그것은 고도로 사용자 정의 할 수 있으며 소스를 자유롭게 편집 할 수 있습니다. 희망이 도움 :)