If you want multiple levels of 'nested' rows that line up the columns.
Try this which works in IE, Firefox and Mozilla. It does use the class
attribute to indicate one row as a child of another but you can use
context
to apply styles or you can either try using a name attribute instead
of class
which works in some browsers but is not w3 compliant or if you don't
mind the tooltip popping up use title.
The hierarchy should be easy to work out. Any child of the row with
img id r1 should have class r1 and any expanding imgs within those
rows should have an id that starts r1.
I've incremented a counter every time I add an icon but could just as
easily made r111 the first child of the first child of r1. Hope that
makes sense.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta name=vs_targetSchema
content="http://schemas.microsoft.com/intellisense/ie5">
<TITLE>Dynamic nested table rows</TITLE>
<STYLE>
..r1 { BACKGROUND-COLOR: yellow }
..r12 { BACKGROUND-COLOR: lime }
..r123 { BACKGROUND-COLOR: cyan }
..r124 { BACKGROUND-COLOR: magenta }
..r125 { BACKGROUND-COLOR: pink }
</STYLE>
<SCRIPT type="text/javascript">
function swap(id)
{
var img = document.getElementById(id) ;
if( img.src.indexOf("plus.gif") != -1 )
{
img.src = "minus.gif" ;
showSubRows(id) ;
}
else
{
img.src = "plus.gif" ;
hideSubRows(id) ;
}
}
function showSubRows(id)
{
var tree = document.getElementById("TreeTable") ;
var oTRs = tree.rows ;
var iLength = oTRs.length;
for (var i=0; i < iLength; i++)
{
var tr = oTRs[i] ;
var img = document.getElementById(tr.className) ;
// if img with id equal to row's class name has a minus, show the
row
if( img && img.src.indexOf("minus.gif") != -1 )
{
if( document.all )
tr.style.display = "block" ;
else
tr.style.display = "table-row" ;
}
}
}
function hideSubRows(id)
{
var tree = document.getElementById("TreeTable") ;
var oTRs = tree.rows ;
var iLength = oTRs.length;
for (var i=0; i < iLength; i++)
{
var tr = oTRs[i] ;
// Collapse all descendents
if( tr.className.indexOf(id) == 0 )
tr.style.display = "none" ;
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE border="1">
<TBODY id="TreeTable">
<TR class="r1">
<TD colspan="5">1</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r1">
<TD><IMG src="plus.gif" border="0" id="r12" style="cursor:
pointer" onclick="swap('r12')"></TD>
<TD colspan="4">2</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r12" style="display: none">
<TD> </TD>
<TD colspan="4">21</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r12" style="display: none;">
<TD><IMG src="plus.gif" border="0" id="r123" style="cursor:
pointer" onclick="swap('r123')"></TD>
<TD colspan="4">22</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r123" style="display: none">
<TD> </TD>
<TD> </TD>
<TD colspan="3">221</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r12" style="display: none;">
<TD><IMG src="plus.gif" border="0" id="r124" style="cursor:
pointer" onclick="swap('r124')"></TD>
<TD colspan="4">23</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r124" style="display: none">
<TD> </TD>
<TD> </TD>
<TD colspan="3">231</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r12" style="display: none">
<TD> </TD>
<TD colspan="4">24</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r12" style="display: none;">
<TD><IMG src="plus.gif" border="0" id="r125" style="cursor:
pointer" onclick="swap('r125')"></TD>
<TD colspan="4">25</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r125" style="display: none">
<TD> </TD>
<TD> </TD>
<TD colspan="3">251</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r1">
<TD colspan="5">3</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
"deepakp" <de*********@hotmail.com> wrote in message news:<11**********************@f14g2000cwb.googleg roups.com>...
Joakim Braun wrote: "Robert" <rc*******@my-deja.com> skrev i meddelandet
news:11**********************@f14g2000cwb.googlegr oups.com...
<snip> Is there any way of grouping multiple rows so that you can address them from within javascript? This would eliminate the need to run down
a <snip>
<tbody id="someid">
...<tr>'s...
</tbody>
<tbody id="someotherid">
...<tr>'s...
</tbody>
You should be able to access the <tbody>s and their contained <tr>s
with DOM methods (getElementById(), getElementsByTagName() etc).
Joakim Braun
I just wanted to say thanks to all especially to Joakim, Jeff and
Robert for sharing the wisdom. The solutions proposed worked well in IE
6.0 on Windows XP environment.
Thanks again and have a wonderful weekend.
Deepak