• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Bear Bibeault
  • Liutauras Vilda
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Junilu Lacar
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Stephan van Hulst
  • Jj Roberts
  • Carey Brown
Bartenders:
  • salvin francis
  • Frits Walraven
  • Piet Souris

dynamically expand and collapse table rows

 
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
 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • 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.
 
Marshal
Posts: 67496
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Jagan Jagan Sudhagani,
Your post was moved to a new topic.
 
reply
    Bookmark Topic Watch Topic
  • New Topic