Hi:
Need some guidance on how to construct Fixed headers on top of a
Scrollable table.
I have many hundreds of rows (and 5 text columns) in a table, but
I need
to keep my column headers visible while user is scrolling down thru
the rows.
I have scoured my books (even Flanagan's JaveScript Edition 5),
but
can't find a hint.
Would someone give me a kick-start please ??
Thank you.
-Mel Smith
I usually do a few things for tables with a lot of data:
1. I use both thead and tfoot, that way when the user gets to the bottom
of the table, they still know where they are.
2. I use "green bar" rows, rows of alternating color. That is simple to
do server side.
3. I use javascript to "highlight" the row the user is on.
4. I use the thead and tfoot to sort the data, or I use a form select
above the table that the user and choose which column on which to sort.
I do that sorting server side, a lot easier and works for the client,
with or without javascript enabled.
<script type="text/javascript">
function mark_row(t) {
t.style.backgroundColor = '#F6ECE2';
}
function unmark_row(t) {
t.style.backgroundColor = 'transparent';
}
</script>
</head>
<body>
<table>
<caption>Caption</caption>
<thead>
<tr>
<th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=1">Field1</a>
</th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">Field2
</a></th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">
Field3</a></th>
</tr>
</thead>
<tfoot>
<tr>
<th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=1">Field1</a>
</th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">Field2
</a></th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">
Field3</a></th>
</tr>
</tfoot>
<tbody>
<?php
$i = 0;
while ($row = mysql_fetch_array($rs,MYSQL_NUM))
{
$field1 = $row[0];
$field2 = $row[1];
$field3 = $row[2];
if($i%2==0)
{$trclass = "class=".chr(34)."greenrow".chr(34);}
else
{$trclass = "class=".chr(34)."whiterow".chr(34);}
?>
<tr <?php echo $trclass; ?> onmouseover="markrow(this);">
<td><?php echo $field1; ?></td><td><?php echo $field2; ?></td><td><?php
echo $field3; ?></td>
</tr>
<?php
++$i;
}
mysql_free_result($rs);
?>
</tbody>
</table>