Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I hide the middle of a table using jQuery?

I have a really long 3 column table. 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 obtain using jQuery.

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

I would like to use jQuery's show/hide feature to minimize the table but still show part of the top and bottom rows. The middle rows should be replace with text like "Show Full Table" and when clicked will expand to show the full table from start to finish.

What is the best way to do this in jQuery?

BTW I've already tried adding a class "Table_Middle" to some of the rows but it doesn't hide it completely the space it occupied is still there and I don't have the text to give the user a way to expand the table fully.

[EDIT] Added Working Example HTML inspired by Parand's posted answer

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

It degrades nicely to show only the full table if Javascript is turned off. If Javascript is on then it hides the middle table rows and adds the 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] Link my blog post and working example.

like image 904
Brian Boatright Avatar asked Oct 18 '08 16:10

Brian Boatright


People also ask

How hide data from table in jQuery?

$(document). ready(function() { $("#td_1"). hide(); });

How do we hide content in jQuery?

jQuery hide() MethodThe hide() method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To show hidden elements, look at the show() method.

Which jQuery function is used to hide an element?

The hide() is an inbuilt method in jQuery used to hide the selected element. Syntax: $(selector). hide(duration, easing, call_function);


1 Answers

Something like this could 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(); }); 
like image 75
Parand Avatar answered Oct 05 '22 20:10

Parand