This week's book giveaway is in the Kotlin forum.
We're giving away four copies of Kotlin in Action and have Dmitry Jemerov & Svetlana Isakova on-line!
See this thread for details.
Win a copy of Kotlin in Action this week in the Kotlin forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

dynamically expand and collapse table rows  RSS feed

amine el hardouz
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 15304
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
Bear Bibeault
Author and ninkuma
Posts: 66188
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Jagan Jagan Sudhagani,
Your post was moved to a new topic.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!