Win a copy of Think Java: How to Think Like a Computer Scientist this week in the Java in General forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

dynamically expand and collapse table rows

 
amine el hardouz
Greenhorn
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="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>

<script type="text/javascript">

function poorman_toggle(id)
{
var tr = document.getElementById(id);
if (tr==null) { return; }
var bExpand = tr.style.display == '';
tr.style.display = (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;
else
img.src = sMinus;
}
}

function Toggle_trGrpHeader2()
{
poorman_changeimage('trGrpHeader2_Img', 'images/minus.gif', 'images/plus.gif');
poorman_toggle('row1');
poorman_toggle('row2');
poorman_toggle('row3');
}

function Toggle_trGrpHeader1()
{
poorman_changeimage('trGrpHeader1_Img', 'images/minus.gif', 'images/plus.gif');
poorman_toggle('trRow1');
}
</script>

</head>
<body>

<div>
<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>

<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>

<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>

<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>
<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>
<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>
</tr>

</table>
</div>
</body>
</html>

thankx for your help
 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
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
Marshal
Pie
Posts: 64827
86
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