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> </td>
<td> Civic</td>
<td> 150</td>
</tr>
<tr class="expand" id="aug2">
<td> </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> </td>
<td> Accord</td>
<td> 450</td>
</tr>
<tr class="expand" id="nov2"> <td> </td>
<td> Civic</td>
<td> 250</td>
</tr>
<tr class="expand" id="nov3"> <td> </td>
<td> Odyssey</td>
<td> 200</td>
</tr>
<tr class="expand" id="nov4"> <td> </td>
<td> Pilot</td>
<td> 50</td>
</tr>
<tr class="expand" id="nov5"> <td> </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> </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>
