Help with nested for loop
Any thoughts why the code below doesn't work? I want users to be able to select if they want to see the expanded rows or not.
<html>
<head>
<script>
function butHideCheck_onclick()
{
var controlIndex;
var element;
var numberOfControls = document.form1.length;
var compSpec = "Your chosen processor speed is ";
compSpec = compSpec + "\nWith the following addtional components\n";
for (controlIndex = 0; controlIndex < numberOfControls; controlIndex++)
{
element = document.form1[controlIndex];
if (element.type == "checkbox")
{
if (element.checked == true)
{
for (i = 1; i < 10; i++)
{
document.getElementById("hidethis" + controlIndex + i).style.display = 'none';
}
}
}
}
}
function butShowCheck_onclick()
{
var controlIndex;
var element;
var numberOfControls = document.form1.length;
var compSpec = "Your chosen processor speed is ";
compSpec = compSpec + "\nWith the following addtional components\n";
for (controlIndex = 0; controlIndex < numberOfControls; controlIndex++)
{
element = document.form1[controlIndex];
if (element.type == "checkbox")
{
if (element.checked == true)
{
for (i = 1; i < 10; i++)
{
document.getElementById("hidethis" + controlIndex + i).style.display = '';
}
}
}
}
}
</script>
</head>
<body>
<FORM NAME="form1">
<table border="1">
<tr>
<td>1</td>
<td><input type="checkbox">
</tr>
<tr id="hidethis01">
<td>1a
<td>1b
<tr id="hidethis02">
<td>1c
<td>1d
<tr>
<td>2</td>
<td><input type="checkbox">
</tr>
<tr id="hidethis11">
<td>1a
<td>1a
<tr id="hidethis12">
<td>1b
<td>1b
<tr >
<td>3</td>
<td><input type="checkbox">
</tr>
<tr id="hidethis21">
<td>1a
<td>1a
<tr id="hidethis22">
<td>1b
<td>1b
<tr >
<td>4</td>
<td><input type="checkbox">
</tr>
<tr id="hidethis31">
<td>1a
<td>1a
<tr id="hidethis32">
<td>1b
<td>1b
</table>
</form>
<INPUT TYPE="button" VALUE="Hide Checked" NAME=butCheck
onclick="return butHideCheck_onclick()">
<INPUT TYPE="button" VALUE="Show Checked" NAME=butCheck
onclick="return butShowCheck_onclick()">
</FORM>
</body>
</html>
