Expand and Collapse table rows / tree structures with Javascript


By using DOM and Javascript we can create Expandable / collapsable tree structures or Tables like below .  Example can be seen here http://myjavaserver.com/~lavanya505/htmls/ExpandCollapse.htm
Example 1:
–Tree
—- SubTree1
—- SubTree2
Example 2:
table1.JPG

Code for expanding table rows is as follows.  

The Tree structure code is also same as this except use DIV tags instead of table TR s.

Javascript
var flag=[1,1,1];
var r1; var r2;
function expandCollapse(row){
if(row==1)
{
r1='r1';
r2='r2';
}
else if(row==2)
{
r1='r3';
r2='r4';
}
else if(row==3)
{
r1='r5';
r2='r6';
}
if(flag[row-1]==1)
{
document.getElementById(''+r1+'').style.display="block";
document.getElementById(''+r2+'').style.display="block";
flag[row-1]=0;
}
else
{
document.getElementById(''+r1+'').style.display="none";
document.getElementById(''+r2+'').style.display="none";
flag[row-1]=1;
}
}

Here in javascript function expandCollapse(rownumber) we are checking which row’s + button was clicked and based on that we will display the sub rows. “flag” array is for holding the status of + button for example it says whether the row is expanded or collapsed.
We are expanding the row by making them visible to users using the attribute style="display:block" and collapsing them by setting style="display:none"
In Javascript function we are getting the document elements by its ID and setting these attributes.
 HTML
<table width="100%" border="2" cellpadding="2" cellspacing="2" bordercolor="#000000">
<tr>
<td class="dropshad">Name</td>
<td class="dropshad">Roll Number</td>
<td class="dropshad">Subject</td>
<td class="dropshad">Marks</td>
<td class="dropshad">Phone</td>
<td class="dropshad">Email</td>
</tr>
<tr id="row1">
<td class="dropshad">Mr X</td>
<td class="dropshad">501</td>
<td class="dropshad"><a href="#" mce_href="#" onClick="expandCollapse(1)">+</a></td>
<td class="dropshad"> </td>
<td class="dropshad">111-111-1111</td>
<td class="dropshad">eee@eee.com</td>
</tr>
<tr id="r1" style="display:none ">
<td class="dropshad"> </td>
<td class="dropshad"> </td>
<td class="dropshad">Maths</td>
<td class="dropshad">30</td>
<td class="dropshad"> </td>
<td class="dropshad"> </td>
</tr>
<tr id="r2" style="display:none ">
<td class="dropshad"> </td>
<td class="dropshad"> </td>
<td class="dropshad">Science</td>
<td class="dropshad">40</td>
<td class="dropshad"> </td>
<td class="dropshad"> </td>
</tr>
<tr id="row2">
<td class="dropshad">Mr Y </td>
<td class="dropshad">502</td>
<td class="dropshad"><a href="#" mce_href="#" onClick="expandCollapse(2)">+</a></td>
<td class="dropshad"> </td>
<td class="dropshad">111-111-1111</td>
<td class="dropshad">eee@eee.com</td>
</tr>
<tr id="r3" style="display:none ">
<td class="dropshad"> </td>
<td class="dropshad"> </td>
<td class="dropshad">Maths</td>
<td class="dropshad">23</td>
<td class="dropshad"> </td>
<td class="dropshad"> </td>
</tr>
<tr id="r4" style="display:none ">
<td class="dropshad"> </td>
<td class="dropshad"> </td>
<td class="dropshad">Science</td>
<td class="dropshad">45</td>
<td class="dropshad"> </td>
<td class="dropshad"> </td>
</tr>
<tr id="row3">
<td class="dropshad">Mr Z </td>
<td class="dropshad">503</td>
<td class="dropshad"><a href="#" mce_href="#" onClick="expandCollapse(3)">+</a></td>
<td class="dropshad"> </td>
<td class="dropshad">111-111-1111</td>
<td class="dropshad">eee@eee.com</td>
</tr>
<tr id="r5" style="display:none ">
<td class="dropshad"> </td>
<td class="dropshad"> </td>
<td class="dropshad">Maths</td>
<td class="dropshad">50</td>
<td class="dropshad"> </td>
<td class="dropshad"> </td>
</tr>
<tr id="r6" style="display:none ">
<td class="dropshad"> </td>
<td class="dropshad"> </td>
<td class="dropshad">Science</td>
<td class="dropshad">40</td>
<td class="dropshad"> </td>
<td class="dropshad"> </td>
</tr>


</table>

The output of this exapmple is here...
http://myjavaserver.com/~lavanya505/htmls/ExpandCollapse.htm

Leave comments if any Questions.

About these ads
Published in: on March 6, 2007 at 11:51 am  Comments (12)  

The URI to TrackBack this entry is: http://klavanya.wordpress.com/2007/03/06/expand-and-collapse-table-rows-tree-structures-with-javascript/trackback/

RSS feed for comments on this post.

12 CommentsLeave a comment

  1. do you suggest that this table structure is applicable in WordPress ?
    As i’ve been trying hard to incorporate tables into WP & failed since it doesn’t support any.

  2. I think wordpress will not allow javascript for some security reasons.

  3. Hi Lavanya,

    This is great feature, actually we wanted the same structure, but the thing is we want to integrate this with struts app, is it possible to handle Struts action using this structure..

    Thanks
    Chintan

  4. Lavanya garu,
    The example is awesome.I have the similar situation. we have a table in jsp, that is filled with data from database based on user input. once we have the table with data .. we have to display a + sign beside every row. when the user clicks on + sign another query should be executed by taking the value where the user clicked on + as input and disply the results on the same page.i am not sure how to achive this.

    ur help is greatly appreciated.

  5. Lavanya garu,
    The example is awesome.I have the similar situation. we have a table in jsp, that is filled with data from database based on user input. once we have the table with data .. we have to display a + sign beside every row. when the user clicks on + sign another query should be executed by taking the value where the user clicked on + as input and disply the results on the same page.i am not sure how to achive this.

    ur help is greatly appreciated.

  6. Lavanya garu,
    The example is awesome.I have the similar situation. we have a table in jsp, that is filled with data from database based on user input. once we have the table with data .. we have to display a + sign beside every row. when the user clicks on + sign the user should be able to see the data in the below with – sign (like sub tree..) .i am not sure how to achive this.

    ur help is greatly appreciated.

    • Hey trinadh,

      Am’ in exactly the same situation as yours. Would greatly appreciate if you could share any solution you have found for your problem.

  7. hey ,i have an dtree javascript build in my project but it does not keep a track of level of nodes it is showing.
    Any solutions !!!

  8. [...] well, it may be closer to this example because my stuff is in a table. Expand and Collapse table rows / tree structures with Javascript Lavanya’s Blog [...]

  9. Off topic – need help with email settings
    How do I change Gmails SMTP settings?
    Dr Gil Lederman
    Gil Lederman
    Gil Lederman MD

  10. Digital memory,to me, is something that I seem to be unable to ever have enough of. It’s as if megabytes and gigabytes have become a permanent part of my every day existence. Ever since I bought a Micro SD Card for my Nintendo DS flash card, I’ve been on the constant lookout for high memory at low prices. I feel like I’m going insane.(Submitted from Nintendo DS running R4i SDHC RPost)

  11. Interesting post… Looks like flash memory is finally beginning to become more popular. Hopefully we’ll start seeing decreasing SSD prices in the near future. 5 dollar 32 GB SDs for your Nintendo DS flash card… imagine that!(Posted from Nintendo DS running R4i N3T)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 57 other followers

%d bloggers like this: