How to hide/show table rows using jQuery?

Question

I have a Zend Framework (PHP) web application that has a table with a lot of rows.

• 99.9% of the time, the user will take action on the first or second row.
• 00.1% of the time, the user will need to go back and take action on a different row.

So I only really need to display the first few rows on page load, and keep the rest available for the sake of history.

I would like to shorten the table somehow. I'm thinking, using jQuery, maybe do something where the first 5 rows are displayed (the rest are hidden), and at the bottom of the table, there is a link to display 5 more rows.

What do you think? How could I achieve this with jQuery?

Answer 1

Sure you could do this with jQuery. I would probably do it this way:

<table>
<tbody id="new">
  <tr>...</tr> <!-- x5 -->
  <tr><td><a href="#" id="toggle">Show Old</a></td></tr>
</tbody>
<tbody id="old">
  ...
</tbody>
</table>

Load them hidden with CSS:

#old { display: none; }

and:

$(function() {
  $("#toggle").click(function() {
    if ($("#old").is(":hidden")) {
      $(this).text("Hide Old");
    } else {
      $(this).text("Show Old");
    }
    $("#old").slideToggle();
    return false;
  });
});

The jQuery hide/show effects can be a bit strange with table components however. If so change the CSS to this:

#old.hidden { display: none; }

and:

$(function() {
  $("toggle").click(function() {
    if ($("#old").hasClass("hidden")) {
      $(this).text("Hide Old");
    } else {
      $(this).text("Show Old");
    }
    $(this).toggleClass("hidden");
    return false;
  });
});

Of course you don't get the nice effects this way.

Answer 2

This is how I would do this (demo here):

Script

var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
var numRows = $('table').find('tr').length; // Total # rows

$(document).ready(function(){
 // Hide rows and add clickable div
 $('table')
  .find('tr:gt(' + (numShown - 1) + ')').hide().end()
  .after('<div id="more">Show <span>' + numMore + '</span> More</div>');

 $('#more').click(function(){
  numShown = numShown + numMore;
  // no more show more if done
  if ( numShown >= numRows ) $('#more').remove();
  // change rows remaining if less than increment
  if ( numRows - numShown < numMore ) $('#more span').html(numRows - numShown);
  $('table').find('tr:lt('+numShown+')').show();
 })

})