Best IT Recipes

How to hide the middle of a table using jQuery?

I have a very long table with three columns. I would like to

<table> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Start</td><td>Hiding</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>End</td><td>Hiding</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> </table>

This is the result I'm trying to get with jQuery.

 Column1 Column2 Column1 Column2 ...Show Full Table... Column1 Column2 Column1 Column2

I would like to use the jQuery show / hide function to minimize the table, but still show some of the top and bottom rows. The middle rows should be replaced with text like "Show full table", and when clicked it will expand to show the full table from start to finish.

What is the best way to do this in jQuery?

BTW I already tried to add the "Table_Middle" class to some of the rows, but it does not hide it completely, the space in which it was occupied is still there, and I do not have text to give the user a way to fully expand the table.

[EDIT] Added working HTML example based on Parand answer

The example below is a complete working example, you don’t even need to download jquery. Just paste into an empty HTML file.

It degrades nicely to show only the full table if Javascript is disabled. If Javascript is enabled, it hides the middle rows of the table and adds show / hide links.

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Example Show/Hide Middle rows of a table using jQuery</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#HiddenRowsNotice").html("<tr><td colspan='2'> <a href='#'>>> some rows hidden <<</a></td></tr>"); $("#ShowHide").html("<tr><td colspan='2'><a href='#'>show/hide middle rows</a></td></tr>"); $("#HiddenRows").hide(); $('#ShowHide,#HiddenRowsNotice').click( function() { $('#HiddenRows').toggle(); $('#HiddenRowsNotice').toggle(); }); }); </script> </head> <body> <table> <tbody id="ShowHide"></tbody> <tr><th>Month Name</th><th>Month</th></tr> <tbody> <tr><td>Jan</td><td>1</td></tr> </tbody> <tbody id="HiddenRowsNotice"></tbody> <tbody id="HiddenRows"> <tr><td>Feb</td><td>2</td></tr> <tr><td>Mar</td><td>3</td></tr> <tr><td>Apr</td><td>4</td></tr> </tbody> <tbody> <tr><td>May</td><td>5</td></tr> </tbody> </table> </body> </html>

[EDIT] Add a link to your blog and working example.

+49
jquery html html-table
Oct 18 '08 at 16:22
source share
6 answers

Something like this might work:

 <table> <tbody> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr class="Show_Rows"><td>Start</td><td>Hiding</td></tr> </tbody> <tbody class="Table_Middle" style="display:none"> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> </tbody> <tbody> <tr class="Show_Rows"><td>End</td><td>Hiding</td></tr> <tr><td>Column1</td><td>Column2</td></tr> <tr><td>Column1</td><td>Column2</td></tr> </tbody> </table> $('#something').click( function() { $('.Table_Middle').hide(); $('.Show_Rows').show(); }); $('.Show_Rows').click( function() { $('.Show_Rows').hide(); $('.Table_Middle').show(); });
+56
Oct 18 '08 at 16:33
source share

The easiest way is to add a <tbody> in to group the rows and switch between none and table-row-group (catch exception and set it to block for IE). Not sure about making it specific to jquery, but this is the "normal" way of doing things.

+4
Oct 18 '08 at 16:27
source share

Here is a solution that does not require additional markup and beautifully worsens.

 <table id="myTable"> <tbody> <tr><td>Cell</td><td>Cell</td></tr> <tr><td>Cell</td><td>Cell</td></tr> <tr><td>Cell</td><td>Cell</td></tr> <tr><td>Cell</td><td>Cell</td></tr> <tr><td>Cell</td><td>Cell</td></tr> </tbody> </table>

and jQuery ... I hardcoded here (e.g. table id, number of rows displayed, etc.). They can be placed in the class attribute in the table if you want it to be more reusable (for example: <table class="hidey_2"> )

 var showTopAndBottom = 2, minRows = 4, $rows = $('#myTable tr').length), length = $rows.length ; if (length > minRows) { $rows .slice(showTopAndBottom, length - showTopAndBottom) .hide() ; $rows .eq(showTopAndBottom - 1) .after( // this colspan could be worked out by counting the cells in another row $("<tr><td colspan=\"2\">Show</td></tr>").click(function() { $(this) .remove() .nextAll() .show() ; }) ) ; }
+4
Oct 20 '08 at 1:39
source share

Try using the slice () method:

 $("#table tr").slice(1, 4).hide();
+4
Oct 23 '09 at 20:05
source share

If you give the middle <tr /> tags the class " Table_Middle ", this will greatly simplify the work. Then it only takes a few jQuery lines. One to add the "Show full table" line, and the other to add a click listener for that line. Be sure to change the colspan "X" attribute value to the number of columns in the table.

  // jQuery chaining is useful here $(".Table_Middle").hide() .eq(0) .before('<tr colspan="X" class="showFull">Show Full Table<tr/>'); $(".showFull").click(function() { $(this).toggle(); $(".Table_Middle").toggle(); });

This is useful because it is greatly degraded and is accessible to many browsers / devices. If JavaScript is disabled or CSS is disabled (or any other script that may cause this code to be unsupported), there is no “show full table” line.

+2
Oct 18 '08 at 16:40
source share

I would do it like this:

 <table> <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> </thead> <tbody> <tr> <td>data1</td> <td>data1</td> <td>data1</td> </tr> ... </tbody> <tbody id="hidden-rows"> <tr> <td colspan="3"> <a href="#" onclick="$('#hidden-rows').hide();$('#extra-rows').show();"> Show hidden rows </a> </td> </tr> </tbody> <tbody id="extra-rows" style="display: none;"> <tr> <td>data1</td> <td>data1</td> <td>data1</td> </tr> ... </tbody> <tbody> <tr> <td>data1</td> <td>data1</td> <td>data1</td> </tr> ... </tbody> </table>

This is not a great method because it does not deteriorate beautifully.

To achieve good quality, you will have to first display all the lines, and then hide them using the ready-made jQuery document function, and also create a line with a link.

In addition, your method of providing strings to hide a specific class should also work. JQuery will look something like this:

 $(document).ready(function() { $('tr.Table_Middle').hide(); });

You still need to create a line with a link to show it, though.

+1
Oct 18 '08 at 16:35
source share


More articles:


All Articles