473,549 Members | 2,699 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.javas cript
and
comp.infosystem s.www.authoring.stylesheets

Thanks,
Deepak

Jul 23 '05 #1
15 2682
"deepakp" <de*********@ho tmail.com> skrev i meddelandet
news:11******** *************@z 14g2000cwz.goog legroups.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.javas cript
and
comp.infosystem s.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_expa nd"
onclick="toggle DataVisibility( '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 toggleDataVisib ility(inTableID ){

var theTable = document.getEle mentById(inTabl eID);
var theIcon = document.getEle mentById(inTabl eID + "_expand");
var tableIsInvisibl e = (theTable && theTable.style. display &&
theTable.style. display == "none");

if(theTable && theIcon && tableIsInvisibl e){

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

// Switch to other icon
theIcon.src = "openicon.g if";
}
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.javas cript
and
comp.infosystem s.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.javas cript "deepakp"
<de*********@ho tmail.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.javas cript
| and
| comp.infosystem s.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
incompatabiliti es.

---------------------------------------------------------------
jn****@yourpant sbigpond.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><ti tle>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(t heChecked,theWh at) {
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.getEl ementById)
{
theNode = document.getEle mentById(theWha t+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.d isplay = theDisplay;
}

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

}

</script>
</head>

<body onload="changeA ll(true);">

<br>

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

<table border="1" width="35%">
<tbody><tr> <td width="22%"><st rong>Month</strong></td>
<td width="39%"><st rong>Manufactur er</strong></td>

<td width="39%"><st rong>No. Sold</strong></td>
</tr>
<tr>
<td>Aug 04</td>
<td>Honda <input name="aug"
checked
value="checked"
onclick=
"changeDisplay( this.checked,th is.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,th is.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,th is.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,th is.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,th is.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,th is.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.goo glegroups.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 (), getElementsByTa gName() etc).

Joakim Braun

Jul 23 '05 #6
Joakim Braun wrote:
"Robert" <rc*******@my-deja.com> skrev i meddelandet
news:11******** **************@ f14g2000cwb.goo glegroups.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 (), getElementsByTa gName() 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************ ******@nntpserv er.swip.net>,
"Joakim Braun" <jo**********@j fbraun.removeth is.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><ti tle>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(t heChecked,theWh at) {
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.getEl ementById)
{
theNode = document.getEle mentById(theWha t+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.d isplay == "string")
{ theNode.style.d isplay = theDisplay; }

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

}

</script>
</head>

<body onload="changeA ll(true);">

<br>

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

<table border="1" width="35%">
<thead>
<tr>
<td width="22%"><st rong>Month</strong></td>
<td width="39%"><st rong>Manufactur er</strong></td>
<td width="39%"><st rong>No. Sold</strong></td>
</tr>
</thead>
<tr>
<td>Aug 04</td>
<td>Honda <input name="aug"
checked
value="checked"
onclick=
"changeDisplay( this.checked,th is.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,th is.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,th is.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,th is.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,th is.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,th is.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>Dynami c nested table rows</TITLE>
<SCRIPT type="text/javascript">
function swap(id)
{
var oTRs = document.getEle mentsByTagName( "TR") ;
var iLength = oTRs.length;
for (var i=0; i < iLength; i++)
{
var tr = oTRs[i] ;
if( tr.className == id )
{
if( tr.style.displa y == "none" )
{
if( document.all )
tr.style.displa y = "block" ;
else
tr.style.displa y = "table-row" ;
}
else
{
tr.style.displa y = "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*********@ho tmail.com> wrote in message news:<11******* *************** @f14g2000cwb.go oglegroups.com> ...
Joakim Braun wrote:
"Robert" <rc*******@my-deja.com> skrev i meddelandet
news:11******** **************@ f14g2000cwb.goo glegroups.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 (), getElementsByTa gName() 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_targetS chema
content="http://schemas.microso ft.com/intellisense/ie5">
<TITLE>Dynami c 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.getEle mentById(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.getEle mentById("TreeT able") ;
var oTRs = tree.rows ;
var iLength = oTRs.length;
for (var i=0; i < iLength; i++)
{
var tr = oTRs[i] ;
var img = document.getEle mentById(tr.cla ssName) ;
// 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.displa y = "block" ;
else
tr.style.displa y = "table-row" ;
}
}
}

function hideSubRows(id)
{
var tree = document.getEle mentById("TreeT able") ;
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.in dexOf(id) == 0 )
tr.style.displa y = "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*********@ho tmail.com> wrote in message news:<11******* *************** @f14g2000cwb.go oglegroups.com> ...
Joakim Braun wrote:
"Robert" <rc*******@my-deja.com> skrev i meddelandet
news:11******** **************@ f14g2000cwb.goo glegroups.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 (), getElementsByTa gName() 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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
15641
by: deepakp | last post by:
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...
0
1542
by: jpeters | last post by:
I am trying to create a crystal report in c# dotnet environment that allows the user to drill down. I have divided the report into groups and made them drillable. So for example the user can drill down on each part to see its inventory. Right now in order to drill down they have to pick one of the parts and expand it. Is there a way to set...
2
4492
by: mrwoopey | last post by:
Hi, I need to be able to click onto a map and then drill down to a report. For example, could we have a map of the Chicagoland area with clickable areas (zip code) and when a user clicks on an area it would drill down to a list of stores (Crystal Reports) for that clicked area. Could Mappoint do this? If not is there something else you...
0
1608
by: Harry | last post by:
Hi I created a report using the report viewer in VS.NET. The report has a drill down link on the left side of the page. How can I remove this? Or is there a way to change the width of the drill down links? Thanks Harry
0
1086
by: Kenneth P | last post by:
Hi, I'm trying to set up a drill down report with two grids, one of them inside the other. I've studied one book on this: Building web solutions with asp.net and ado.net by Dino Esposito and one article from asptoday.com
0
2592
by: jtwright | last post by:
I'm trying to create an ASP.NET page that will read over my active directory tree and show the top level OrganizationalUnit values. From there I want the user to be able to click on the top level and be able to click on an OrganizationalUnit and have that return the sublevel OrganizationalUnits. Basically a drill through that works like the...
0
3144
by: adamz5 | last post by:
I am currently exporting a crystal report using code. This works fine and exports the report to a word document onto disk using DiskFileDestinationOptions() and ExportOptions However when i drill down the report (hence looking at a group), the export i am doing exports the whole report not the current group view on the...
3
3212
by: Naseem | last post by:
I am using CR in ASP.NET , I am able to show drill down graphs where grouping is done on single column from result set of sql query, is it possible to achieve drill down by grouping on multiple groups? -Naseem
1
2154
by: IndiraPriyaDarshini | last post by:
Hi, I wanna do drill down in my table.when i click plus it should be expand and when i click minus it should be collapsed..Please help
1
1937
by: Mel | last post by:
Can anyone provide any help on how I would create a drill down on a web page? I want to create something like when you search for car parts the user can navigate the drill downs and at the top of the page is says something like this: Chevy>>2002>>Avalanche>>1500 What is the database behind it? I want to use an Access Database to store...
0
7518
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7715
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
1
7469
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7808
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5368
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5087
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
1
1935
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1057
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
757
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.