This week's book giveaway is in the Servlets forum.
We're giving away four copies of Murach's Java Servlets and JSP and have Joel Murach on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes expand and collapse Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "expand and collapse" Watch "expand and collapse" New topic
Author

expand and collapse

Jagan Jagan Sudhagani
Greenhorn

Joined: Apr 17, 2012
Posts: 1
Hi,

Following is my code ......


<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', 'minus.jpg', 'plus.jpg');
poorman_toggle('row1');
poorman_toggle('row2');
poorman_toggle('row3');
}

function Toggle_trGrpHeader3()
{
poorman_changeimage('trGrpHeader3_Img', 'minus.jpg', 'plus.jpg');
poorman_toggle('row4');
poorman_toggle('row5');
poorman_toggle('row6');
}

function Toggle_trGrpHeader1()
{
poorman_changeimage('trGrpHeader1_Img', 'minus.jpg', 'plus.jpg');
poorman_toggle('trRow1');

}
function Toggle_trGrpHeader4()
{
poorman_changeimage('trGrpHeader4_Img', 'minus.jpg', 'plus.jpg');
poorman_toggle('row4');
poorman_toggle('row5');
poorman_toggle('row6');
poorman_toggle('row1');
poorman_toggle('row2');
poorman_toggle('row3');
poorman_toggle('trGrpHeader2');
poorman_toggle('trGrpHeader3');

}
</script>

</head>
<body>

<div>
<table border="1">
<tr id="trGrpHeader1">
<td colspan="4"><span onclick="javascript:Toggle_trGrpHeader1();"><img src="minus.jpg" 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="trGrpHeader4">
<td colspan="4"><span onclick="javascript:Toggle_trGrpHeader4();"><img src="minus.jpg" id="trGrpHeader4_Img"/>Sample</span></td>
</tr>

<tr id="trGrpHeader2">
<td colspan="4"><span onclick="javascript:Toggle_trGrpHeader2();"><img src="minus.jpg" 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>


<tr id="trGrpHeader3">
<td colspan="4"><span onclick="javascript:Toggle_trGrpHeader3();"><img src="minus.jpg" id="trGrpHeader3_Img"/>header</span></td>
</tr>

<tr id="row4">
<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="row5">
<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="row6">
<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>


When i click on "Minus sign of Sample" "Pretend this is a header" is in expanded state and "header" is in expanded state it is collapsing but when Pretend this is a header and header is collapsed the rows under Pretend this is a header and header are displaying ...... it should not display .... Could you please any one help me out ..... Thanks in advance



[Thumbnail for minus.jpg]

[Thumbnail for plus.jpg]

 
wood burning stoves
 
subject: expand and collapse
 
Similar Threads
Traversing the table using arrow keys
argument in form access
dynamically expand and collapse table rows
Prevent selection of certain JTable cells
Displaying Table