Meaningless Drivel is fun!
The moose likes HTML, CSS and JavaScript and the fly likes dynamically expand and collapse table rows Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of Java Interview Guide this week in the Jobs Discussion forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "dynamically expand and collapse table rows" Watch "dynamically expand and collapse table rows" New topic

dynamically expand and collapse table rows

amine el hardouz

Joined: Dec 30, 2009
Posts: 1
Hi everybody,
I want to expand and collapse some details rows in my table. The following Code do that not dynamically.
How can i do that dynamically for n rows what i load from a database.

<html xmlns="" >
Untitled Page

<script type="text/javascript">

function poorman_toggle(id)
var tr = document.getElementById(id);
if (tr==null) { return; }
var bExpand = == ''; = (bExpand ? 'none' : '');
function poorman_changeimage(id, sMinus, sPlus)
var img = document.getElementById(id);
if (img!=null)
var bExpand = img.src.indexOf(sPlus) >= 0;
if (!bExpand)
img.src = sPlus;
img.src = sMinus;

function Toggle_trGrpHeader2()
poorman_changeimage('trGrpHeader2_Img', 'images/minus.gif', 'images/plus.gif');

function Toggle_trGrpHeader1()
poorman_changeimage('trGrpHeader1_Img', 'images/minus.gif', 'images/plus.gif');


<table border="1">
<tr id="trGrpHeader1">
<td colspan="4"><span onclick="javascript:Toggle_trGrpHeader1();"><img src="images/minus.gif" id="trGrpHeader1_Img"/>Pretend this is a header for row 1</span></td>

<tr id="trRow1">
<td>  Hello</td>
<td class="number">10</td>
<td class="number">1999-11-17 00:00:00</td>
<td class="number">1999-12-15 00:00:00</td>

<tr id="trGrpHeader2">
<td colspan="4"><span onclick="javascript:Toggle_trGrpHeader2();"><img src="images/minus.gif" id="trGrpHeader2_Img"/>Pretend this is a header</span></td>

<tr id="row1">
<td>  AROUT</td>
<td class="number">10743</td>
<td class="number">1997-11-17 00:00:00</td>
<td class="number">1997-12-15 00:00:00</td>
<tr id="row2">
<td>  AROUT</td>
<td class="number">10768</td>
<td class="number">1997-12-08 00:00:00</td>
<td class="number">1998-01-05 00:00:00</td>
<tr id="row3">
<td>  AROUT</td>
<td class="number">10793</td>
<td class="number">1997-12-24 00:00:00</td>
<td class="number">1998-01-21 00:00:00</td>


thankx for your help
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15302

amine, welcome to JavaRanch. When you post code, please use UBB Code Tags. It makes reviewing your code much easier for everyone. You can edit your post and add these tags by clicking the button.

GenRocket - Experts at Building Test Data
Bear Bibeault
Author and ninkuma

Joined: Jan 10, 2002
Posts: 63873

Jagan Jagan Sudhagani,
Your post was moved to a new topic.

[Asking smart questions] [About Bear] [Books by Bear]
I agree. Here's the link:
subject: dynamically expand and collapse table rows
It's not a secret anymore!