By the way the <font> tag is way way way obsolete.
Learn to use CSS classes instead!
Here's a demo of what you COULD do. Notice that it doesn't care how many detail lines there are per header line.
Notice there are no <font> tags.
Notice that the JS code is "unobtrusive" and depends only on the id of the table and the class name "header" for header rows.
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#myTable td {
font-family: Arial, Helvetica, sans-serif;
}
#myTable tr.header td {
font-weight: bold;
font-style: italic;
}
td.hider {
font-weight: normal;
font-style: normal;
text-decoration: underline;
color: blue;
cursor: pointer;
}
</style>
<body>
<div>
<table id="myTable" border="1">
<tr class="header"><td class="hider">hide detail</td><td>Header</td><td>Row A</td></tr>
<tr><td></td><td>Detail</td><td>1</td></tr>
<tr><td></td><td>Detail</td><td>2</td></tr>
<tr><td></td><td>Detail</td><td>3</td></tr>
<tr class="header"><td class="hider">hide detail</td><td>Header</td><td>Row B</td></tr>
<tr><td></td><td>Detail</td><td>1</td></tr>
<tr><td></td><td>Detail</td><td>2</td></tr>
<tr><td></td><td>Detail</td><td>3</td></tr>
<tr><td></td><td>Detail</td><td>4</td></tr>
<tr><td></td><td>Detail</td><td>5</td></tr>
<tr><td></td><td>Detail</td><td>6</td></tr>
<tr class="header"><td class="hider">hide detail</td><td>Header</td><td>Row C</td></tr>
<tr><td></td><td>Detail</td><td>1</td></tr>
<tr><td></td><td>Detail</td><td>2</td></tr>
<tr class="header"><td class="hider">hide detail</td><td>Header</td><td>Row D</td></tr>
<tr><td></td><td>Detail</td><td>1</td></tr>
<tr><td></td><td>Detail</td><td>2</td></tr>
<tr><td></td><td>Detail</td><td>3</td></tr>
</table>
</div>
<script type="text/javascript">
(
function()
{
var tbl = document.getElementById("myTable");
for ( var r = 0; r < tbl.rows.length; ++r )
{
var row = tbl.rows[r];
if ( row.className == "header" )
{
row.cells[0].onclick = showHide;
}
}
function showHide( )
{
var currow = this.parentNode;
// find currow in all rows
for ( var r = 0; r < tbl.rows.length; ++r )
{
if ( currow == tbl.rows[r] ) break;
}
// are we hiding or showing?
var hide = ( this.innerHTML.toLowerCase().indexOf("hide") >= 0 )
// first of all, change the message:
this.innerHTML = hide ? "show detail" : "hide detail";
// now show/hide all subordinate detail rows:
while( true )
{
++r; // to next row
var row = tbl.rows[r];
if ( row.className == "header" ) break; // done!
row.style.display = hide ? "none" : "table-row";
}
}
}
)();
</script>
</body>
</html>