File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
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
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "dynamically expand and collapse table rows" Watch "dynamically expand and collapse table rows" New topic
Author

dynamically expand and collapse table rows

amine el hardouz
Greenhorn

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

Joined: Jul 11, 2001
Posts: 15299
    
    6

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
Marshal

Joined: Jan 10, 2002
Posts: 60781
    
  65

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


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: dynamically expand and collapse table rows
 
Similar Threads
Traversing the table using arrow keys
Change the background color of a row in a table upon mouse click
Issue with style display property
Passing Table values to action class
Displaying Table