469,323 Members | 1,639 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,323 developers. It's quick & easy.

drill down of a table

Hello,

I need to display a summary report as an table, giving the
user ability to drilldown on a selected row by clicking on a '+' icon.
After viewing drilldown of a particular row, user should be able to
hide it back by clicking on '-' icon. It should be able to work in IE 5
or newer in Win2000/XP environment and the need is best illustrated in
the static webpage

http://www.open365test.net/js_drilldown.html

So far, I have not been able to find an example of how to do this in
doing online searches and would appreciate any help.

Please note, I'm posting this in
comp.lang.javascript
and
comp.infosystems.www.authoring.stylesheets

Thanks,
Deepak

Jul 23 '05 #1
15 2508
"deepakp" <de*********@hotmail.com> skrev i meddelandet
news:11*********************@z14g2000cwz.googlegro ups.com...
Hello,

I need to display a summary report as an table, giving the
user ability to drilldown on a selected row by clicking on a '+' icon.
After viewing drilldown of a particular row, user should be able to
hide it back by clicking on '-' icon. It should be able to work in IE 5
or newer in Win2000/XP environment and the need is best illustrated in
the static webpage

http://www.open365test.net/js_drilldown.html

So far, I have not been able to find an example of how to do this in
doing online searches and would appreciate any help.

Please note, I'm posting this in
comp.lang.javascript
and
comp.infosystems.www.authoring.stylesheets

Thanks,
Deepak


<tbody> sections should in theory do the trick, but as they don't in
practise, how about nesting a table in the row below the cell with the icon?

<table>

<tr>
<td>Col 1</td>
<td>Col 2 <img src="closedicon.gif" id="someid_expand"
onclick="toggleDataVisibility('someid')"></td>
<td>Col 3</td>
</tr>

<tr>
<td colspan="3">

<!--Nested table -->

<table id="someid">
<tr>
<td></td>
<td>Col 2 cont'd</td>
<td></td>
</tr>
</table>

</td>
</tr>

</table>

When the icon img is clicked, call a function like this:

function toggleDataVisibility(inTableID){

var theTable = document.getElementById(inTableID);
var theIcon = document.getElementById(inTableID + "_expand");
var tableIsInvisible = (theTable && theTable.style.display &&
theTable.style.display == "none");

if(theTable && theIcon && tableIsInvisible){

// Make it invisible
theTable.style.display="block"; // or whatever

// Switch to other icon
theIcon.src = "openicon.gif";
}
else if(theTable && theIcon){
// Make it visible
theTable.style.display="none";

// Switch to other icon
theIcon.src = "closedicon.gif";
}

}

Untested, but you get the general idea. With the right CSS formatting, the
nested-ness of the table won't be visible.

Joakim Braun

Jul 23 '05 #2
deepakp wrote:
Hello,

I need to display a summary report as an table, giving the
user ability to drilldown on a selected row by clicking on a '+' icon.
After viewing drilldown of a particular row, user should be able to
hide it back by clicking on '-' icon. It should be able to work in IE 5
or newer in Win2000/XP environment and the need is best illustrated in
the static webpage

http://www.open365test.net/js_drilldown.html

So far, I have not been able to find an example of how to do this in
doing online searches and would appreciate any help.

Please note, I'm posting this in
comp.lang.javascript
and
comp.infosystems.www.authoring.stylesheets

Thanks,
Deepak

i think tables are not suitable for this, at least not as in your
example. maybe try somthing with a list of block items.
Jul 23 '05 #3
On 15 Jan 2005 08:31:39 -0800, in comp.lang.javascript "deepakp"
<de*********@hotmail.com> wrote:
| Hello,
|
| I need to display a summary report as an table, giving the
| user ability to drilldown on a selected row by clicking on a '+' icon.
| After viewing drilldown of a particular row, user should be able to
| hide it back by clicking on '-' icon. It should be able to work in IE 5
| or newer in Win2000/XP environment and the need is best illustrated in
| the static webpage
|
| http://www.open365test.net/js_drilldown.html
|
| So far, I have not been able to find an example of how to do this in
| doing online searches and would appreciate any help.
|
| Please note, I'm posting this in
| comp.lang.javascript
| and
| comp.infosystems.www.authoring.stylesheets
|
| Thanks,
| Deepak


I've uploaded a couple of files for you to look at. The first file
uses nested tables to display/hide the relevant information.
http://jjnau.netfirms.com/showhide/showhide.htm

As you can see, due to the nesting; the cell widths will not be the
same throughout the page. This doesn't look too bad with the demo data
you have. View the above link in both IE and Firefox. Firefox
highlights the jagged layout better than IE.

The next file uses CSS to have a layout like a table. While the
following file works well in IE it appears horrendous in Firefox.
http://jjnau.netfirms.com/showhide/showhideCSS.htm

But if you only use IE then the above will work ok.

Caveat: I know the basics of CSS but I'm not sure of the cross browser
incompatabilities.

---------------------------------------------------------------
jn****@yourpantsbigpond.net.au : Remove your pants to reply
---------------------------------------------------------------
Jul 23 '05 #4
Here is another version of the drill down page. In the case javascript
isn't available, the drill down rows are displayed.

Notice the correspondence between the name tag in the input field and
the id tag on a row. The name tag value prefixes an incremented number
in a row list. I started the index with one (1). All the name tag
values need to be in an array in the changeAll function.

I find it best to eliminate or at least minimize the use of the font
tag when using javascript to modify elements.

I have not done extensive testing on the various browsers.

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
row list. I tried nested tables, but I could not get the page to look
the same, and it was more html coding anyway.

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Drill down</title>

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">

table th{
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
..expand {
font-size: small;
color: #999999;
}

</style>

<script type="text/javascript">

function changeDisplay(theChecked,theWhat) {
var theNode;
var theDisplay;

/* alert("in changeDisplay. theWhat=" + theWhat +
" theChecked = " + theChecked); */

if (theChecked == true)
{
theDisplay = "";
}
else
{
theDisplay = "none";
}
for (var i = 1;;i++)
{
// Check if the getElementById method is available
if (document.getElementById)
{
theNode = document.getElementById(theWhat+i);
/* alert(theNode); */
if (theNode == null)
{ return; }
}
else if (document.all)
{
// The alert lets me verify that I tested the path.
alert("Running an older version of IE." +
" May not be able to hide rows");
theNode = document.all[theWhat+i];
if (theNode == null)
{ return; }
}
else
{
alert("Cannot change visibility of the display element." +
" Was " + theWhat);
return;
}

theNode.style.display = theDisplay;
}

}
function changeAll(which)
{
var all = ["aug","sep","oct","nov","dec","jan"];
for (var i = 0; i< all.length; i++)
{
changeDisplay(false,all[i]);
var element = all[i];
if (document.forms[0].elements[element])
{
document.forms[0].elements[element].checked = false;
}
}

}

</script>
</head>

<body onload="changeAll(true);">

<br>

<form action="" name="myForm">

<table border="1" width="35%">
<tbody><tr> <td width="22%"><strong>Month</strong></td>
<td width="39%"><strong>Manufacturer</strong></td>

<td width="39%"><strong>No. Sold</strong></td>
</tr>
<tr>
<td>Aug 04</td>
<td>Honda <input name="aug"
checked
value="checked"
onclick=
"changeDisplay(this.checked,this.name);"
type="checkbox"></td>
<td>500</td>
</tr>
<tr class="expand" id="aug1">
<td>&nbsp;</td>
<td> Civic</td>
<td> 150</td>
</tr>
<tr class="expand" id="aug2">
<td>&nbsp;</td>
<td> Odyssey</td>
<td> 100</td>
</tr>
<tr>
<td>Sep 04</td>
<td>Honda <input name="sep"
checked
value="checked"
onclick=
"changeDisplay(this.checked,this.name);"
type="checkbox"></td>
<td>750</td>
</tr>
<tr> <td>Oct 04</td>

<td>Honda <input name="oct"
checked
value="checked"
onclick=
"changeDisplay(this.checked,this.name);"
type="checkbox"></td>
<td>1000</td>
</tr>
<tr> <td>Nov 04</td>
<td>Honda <input name="nov"
checked
value="checked"
onclick=
"changeDisplay(this.checked,this.name);"
type="checkbox"></td>
<td>1000</td>

</tr>
<tr class="expand" id="nov1"> <td>&nbsp;</td>
<td> Accord</td>
<td> 450</td>
</tr>
<tr class="expand" id="nov2"> <td>&nbsp;</td>

<td> Civic</td>
<td> 250</td>
</tr>
<tr class="expand" id="nov3"> <td>&nbsp;</td>
<td> Odyssey</td>

<td> 200</td>
</tr>
<tr class="expand" id="nov4"> <td>&nbsp;</td>
<td> Pilot</td>
<td> 50</td>

</tr>
<tr class="expand" id="nov5"> <td>&nbsp;</td>
<td> S2000</td>
<td> 50</td>
</tr>
<tr> <td>Dec 04</td>

<td>Honda <input name="dec"
checked
value="checked"
onclick=
"changeDisplay(this.checked,this.name);"
type="checkbox"></td>
<td>400</td>
</tr>
<tr class="expand" id="dec1">
<td>&nbsp;</td>
<td>Honda </td>
<td>300</td>

</tr>
<tr>
<td>Jan 05</td>
<td>Honda <input name="jan"
checked
value="checked"
onclick=
"changeDisplay(this.checked,this.name);"
type="checkbox"></td>
<td>300</td>

</tr>
</tbody></table>
</form>

</body></html>

Jul 23 '05 #5
"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

Jul 23 '05 #6
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

Jul 23 '05 #7
In article <XF******************@nntpserver.swip.net>,
"Joakim Braun" <jo**********@jfbraun.removethis.com> wrote:

<tbody id="someid">
...<tr>'s...
</tbody>
<tbody id="someotherid">
...<tr>'s...
</tbody>


Here is a version using tbody. I learned a new tag today.

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Drill down</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

table th{
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
..expand {
font-size: small;
color: #999999;
}

</style>

<script type="text/javascript">

function changeDisplay(theChecked,theWhat) {
var theNode;
var theDisplay;

/* alert("in changeDisplay. theWhat=" + theWhat +
" theChecked = " + theChecked); */

if (theChecked == true)
{
theDisplay = "";
}
else
{
theDisplay = "none";
}
var i = "group";

// Check if the getElementById method is available
if (document.getElementById)
{
theNode = document.getElementById(theWhat+i);
if (theNode == null)
{ return; }
}
else if (document.all)
{
// The alert lets me verify that I tested the path.
alert("Running an older version of IE." +
" May not be able to hide rows");
theNode = document.all[theWhat+i];
if (theNode == null)
{ return; }
}
else
{
alert("Cannot change visibility of the display element." +
" Was " + theWhat);
return;
}

if (theNode.style && typeof theNode.style.display == "string")
{ theNode.style.display = theDisplay; }

}
function changeAll(which)
{
var all = ["aug","sep","oct","nov","dec","jan"];
for (var i = 0; i< all.length; i++)
{
changeDisplay(false,all[i]);
var element = all[i];
if (document.forms[0].elements[element])
{
document.forms[0].elements[element].checked = false;
}
}

}

</script>
</head>

<body onload="changeAll(true);">

<br>

<form action="" name="myForm">

<table border="1" width="35%">
<thead>
<tr>
<td width="22%"><strong>Month</strong></td>
<td width="39%"><strong>Manufacturer</strong></td>
<td width="39%"><strong>No. Sold</strong></td>
</tr>
</thead>
<tr>
<td>Aug 04</td>
<td>Honda <input name="aug"
checked
value="checked"
onclick=
"changeDisplay(this.checked,this.name);"
type="checkbox"></td>
<td>500</td>
</tr>
<tbody class="expand" id="auggroup">
<tr >
<td>&nbsp;</td>
<td> Accord</td>
<td> 200</td>
</tr>
<tr>
<td>&nbsp;</td>
<td> Civic</td>
<td> 150</td>
</tr>
<tr>
<td>&nbsp;</td>
<td> Odyssey</td>
<td> 150</td>
</tr>
</tbody>
<tr>
<td>Sep 04</td>
<td>Honda <input name="sep"
checked
value="checked"
onclick=
"changeDisplay(this.checked,this.name);"
type="checkbox"></td>
<td>750</td>
</tr>
<tr>
<td>Oct 04</td>
<td>Honda <input name="oct"
checked
value="checked"
onclick=
"changeDisplay(this.checked,this.name);"
type="checkbox"></td>
<td>1000</td>
</tr>
<tr>
<td>Nov 04</td>
<td>Honda <input name="nov"
checked
value="checked"
onclick=
"changeDisplay(this.checked,this.name);"
type="checkbox"></td>
<td>1000</td>

</tr>
<tbody class="expand" id="novgroup">
<tr >
<td>&nbsp;</td>
<td> Accord</td>
<td> 450</td>
</tr>
<tr>
<td>&nbsp;</td>
<td> Civic</td>
<td> 250</td>
</tr>
<tr>
<td>&nbsp;</td>
<td> Odyssey</td>

<td> 200</td>
</tr>
<tr>
<td>&nbsp;</td>
<td> Pilot</td>
<td> 50</td>

</tr>
<tr>
<td>&nbsp;</td>
<td> S2000</td>
<td> 50</td>
</tr>
</tbody>
<tr>
<td>Dec 04</td>
<td>Honda <input name="dec"
checked
value="checked"
onclick=
"changeDisplay(this.checked,this.name);"
type="checkbox"></td>
<td>400</td>
</tr>
<tbody class="expand" id="decgroup">
<tr>
<td>&nbsp;</td>
<td>Accord </td>
<td>400</td>

</tr>
</tbody>
<tr>
<td>Jan 05</td>
<td>Honda <input name="jan"
checked
value="checked"
onclick=
"changeDisplay(this.checked,this.name);"
type="checkbox"></td>
<td>300</td>

</tr>
</table>
</form>

</body></html>
Jul 23 '05 #8
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 mark a row as a child of another but you can use context
to apply styles or you can try using a name attribute instead of class
which works in some browsers but is not w3 compliant.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Dynamic nested table rows</TITLE>
<SCRIPT type="text/javascript">
function swap(id)
{
var oTRs = document.getElementsByTagName("TR") ;
var iLength = oTRs.length;
for (var i=0; i < iLength; i++)
{
var tr = oTRs[i] ;
if( tr.className == id )
{
if( tr.style.display == "none" )
{
if( document.all )
tr.style.display = "block" ;
else
tr.style.display = "table-row" ;
}
else
{
tr.style.display = "none" ;
}
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE border="1">
<TR class="r1">
<TD>1</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r1" id="r2" style="cursor: pointer"
onclick="swap('r2')">
<TD>2</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r2" style="display: none">
<TD>21</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r2" style="display: none; cursor: pointer" id="r3"
onclick="swap('r3')">
<TD>22</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r3" style="display: none">
<TD>221</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r2" style="display: none; cursor: pointer" id="r4"
onclick="swap('r4')">
<TD>23</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r4" style="display: none">
<TD>231</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r2" style="display: none">
<TD>24</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r2" style="display: none; cursor: pointer" id="r5"
onclick="swap('r5')">
<TD>25</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r5" style="display: none">
<TD>251</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r1">
<TD>3</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
</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

Jul 23 '05 #9
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>&nbsp;</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>&nbsp;</TD>
<TD>&nbsp;</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>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD colspan="3">231</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r12" style="display: none">
<TD>&nbsp;</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>&nbsp;</TD>
<TD>&nbsp;</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

Jul 23 '05 #10
Got one more for you. 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 show one rows 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 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 be r111 for 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>
<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>&nbsp;</TD>
<TD colspan="4">21</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r12" style="display: none;">
<TD>&nbsp;</TD>
<TD><IMG src="plus.gif" border="0" id="r123" style="cursor:
pointer" onclick="swap('r123')"></TD>
<TD colspan="3">22</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r123" style="display: none">
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD colspan="3">221</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r12" style="display: none;">
<TD>&nbsp;</TD>
<TD><IMG src="plus.gif" border="0" id="r124" style="cursor:
pointer" onclick="swap('r124')"></TD>
<TD colspan="3">23</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r124" style="display: none">
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD colspan="3">231</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r12" style="display: none">
<TD>&nbsp;</TD>
<TD colspan="4">24</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r12" style="display: none;">
<TD>&nbsp;</TD>
<TD><IMG src="plus.gif" border="0" id="r125" style="cursor:
pointer" onclick="swap('r125')"></TD>
<TD colspan="3">25</TD>
<TD>column2</TD>
<TD>column3</TD>
</TR>
<TR class="r125" style="display: none">
<TD>&nbsp;</TD>
<TD>&nbsp;</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

Jul 23 '05 #11
On 16 Feb 2005 16:28:04 -0800, fr*******@surf.to (Chris) wrote:
Got one more for you. ...


NO! Stop stuttering, search for help if needed.

--
Rex
Jul 23 '05 #12
Sorry. Thought I'd removed the first two. Using Google Groups-Beta and
only 1 shows on there.

Jul 23 '05 #13
On 17 Feb 2005 05:23:10 -0800, "Chris" <fr*******@surf.to> wrote:
Sorry. Thought I'd removed the first two.
Using Google Groups-Beta and only 1 shows on there.


Well, I'm sorry to bring the news.
As soon as you have posted something on Usenet it distributes through
out the world at some considerable speed onto just about every Usenet
news server there is.

If you try to cancel a post on your particular input server it /may/
work there but very few other servers around the world do listen to
cancel messages.

Also remember that the Google web based interface to Usenet is a fraud.

Just the name it self "Google Groups" is enough to make an old timer
angry. Usenet is not something that is in Google's possession.

I would claim that most people still use a traditional news reader for
access to Usenet news.

Usenet is not a www forum, never has been and hopefully never will be.

Usenet news is the oldest means of communication over Internet, it was
in operation before the more specialized point to point email technique
came on the net, and it was in operation on Internet for over a decade
before the www was "invented".

Do your self a favor, get hold of a news reader and a decent Usenet news
provider. Skip Google, please.

--
Rex
Jul 23 '05 #14
Jan Roland Eriksson <jr****@newsguy.com> writes:
Usenet news is the oldest means of communication over Internet, it was
in operation before the more specialized point to point email technique
came on the net, and it was in operation on Internet for over a decade
before the www was "invented".


Oh, if we are being pedantic: usenet (nntp) and internet (tcp/ip) were
originally two different things, and it was only later that usenet
merged with the internet.

--
| jonivar skullerud | http://www.jonivar.skullerud.name/ |
-------------------------------------------------------------------------
You can tell a true war story by its absolute and uncompromised allegiance
to obscenity and evil. -- Tim O'Brien
Jul 23 '05 #15
JRS: In article <ic********************************@4ax.com>, dated
Thu, 17 Feb 2005 15:43:30, seen in news:comp.infosystems.www.authoring.s
tylesheets, Jan Roland Eriksson <jr****@newsguy.com> posted :
Do your self a favor, get hold of a news reader and a decent Usenet news
provider. Skip Google, please.


But, as not everyone will[*], IMHO the newsgroup FAQs should now make
some brief reference to *how* best to reply with new Google.
[*] And using a Web interface may be a practical necessity for those
who, for whatever reason, are not using their usual computer(s).

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demon.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
Jul 23 '05 #16

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

13 posts views Thread by deepakp | last post: by
reply views Thread by jpeters | last post: by
2 posts views Thread by mrwoopey | last post: by
reply views Thread by Harry | last post: by
reply views Thread by Kenneth P | last post: by
reply views Thread by jtwright | last post: by
3 posts views Thread by Naseem | last post: by
1 post views Thread by Mel | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by Gurmeet2796 | last post: by
reply views Thread by mdpf | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.