FoldingUnfolding table with HTMLJavascript - Stack Overflow

admin管理员组

文章数量:1303640

I have a table which is pretty big, so I need a way to unfold it all the time, and unfold it only necessary.

How can I do that with HTML? Do I need Javascript for this? If so, what's the code for this?

I have a table which is pretty big, so I need a way to unfold it all the time, and unfold it only necessary.

How can I do that with HTML? Do I need Javascript for this? If so, what's the code for this?

• javascript
• html

Share Improve this question Follow asked Jul 24, 2010 at 16:27 prosseekprosseek 191k227227 gold badges583583 silver badges885885 bronze badges 2

• Can you give some sort of example? Im not too sure what you mean by folding/unfolding a table – barrylloyd Commented Jul 24, 2010 at 16:42
• 1 Why don't you add paging instead of folding / unfolding? That way you could keep the data cached and display only the current page. Then you wouldn't have to worry about poor performance. – Dan Stocker Commented Jul 24, 2010 at 16:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

If you will use jquery you can check the code below.

In css:

.collapsed-table tr {
  display: none;
}

In html:

<script type="text/javascript" src="http://ajax.googleapis./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>

Keep the header (thead) visible at all times and toggle the visibility of the body (tbody) when the user clicks on the folding button.

Using jQuery:

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

I know it's an old question but others can have the same problem and no one have provided a plete solution, so if you want to fold / unfold something with an animation, I developed a script named TextShower that allows you to do that. It's highly customizable and you can edit its source freely. Hope this helps :)

本文标签： FoldingUnfolding table with HTMLJavascriptStack Overflow