Expandable "Detail" Table Rows

Expandable "Detail" Table Rows

I am building an elearning site where the user is taken through a series of dynamically driven pages to refine their choices. I am using php amd mysql to populate a series of tables but on the last page the table gets very long so i am trying to make the table expandable.

 

I found this and this on http://www.javascripttoolbox.com/jquery/ and it's proving helpful but i need a little help taking it a step further. I also found this to be useful for anyone else who is trying to do the same thing: http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx

 

FROM JAVASCRIPTTOOLBOX 

 

A common UI is to have a table of data rows, which when clicked on expand to show a detailed breakdown of "child" rows below the "parent" row.

The only requirements are:

1.   Put a class of "parent" on each parent row (tr)

2.   Give each parent row (tr) an id
3.  Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs

 

Original code:

 

  1. $(function() {
  2.                $('tr.parent')
  3.                                .css("cursor","pointer")
  4.                                .attr("title","Click to expand/collapse")
  5.                                .click(function(){
  6.                                               $(this).siblings('.child-'+this.id).toggle();
  7.                                });
  8.                $('tr[@class^=child-]').hide().children('td');
  9. });

 

This works great but my parent and child rows all contain checkboxes and If i try and check the checkboxes in the master rows the child rows associated with that master row expand and contract. I have added an extra cell to each row and i'm using a css class to add an arrow image to each master row but i am new to Javascript so i am not sure what i am doing.

 

My code now looks like this:

 

  1. $(document).ready(function() {
  2.                $('tr:not(.parent)').hide();
  3.               
  4.                //$('tr.parent')
  5.                $('.arrow')
  6.                                .css("cursor","pointer")
  7.                                .attr("title","Click to expand/collapse")
  8.                                .click(function(){
  9.                                               $(this).siblings('.child-'+this.id).toggle();
  10.                                               $(this).toggleClass("up");
  11.                                });
  12.                });

 

So far the arrow image is toggling but i can't seem to work out how to get the .click function to affect the whole row and not just the image. Can anybody help me?

 

Thanks