Dear Dudes,
I post this in multiple groups for opening brain storm.
Sometime I need to query the data from database server then display them
into user's browser in HTML <table>. But if the <table> is very LARGE,
let's say 20 columns, hundreds rows. Usually you have header <th> tags
on 1st (top) row and 1st (most left) column. For a such LARGE <table>.
you really want:
1) When scroll the vertical scroll bar, you want the top row header
<thead> stay in the same position, the rest of rows are move up/down
(this will include the most left column).
I am success doing this part.
2) When you scroll the horizontal scroll bar, you want the most left
column stay in the same position, the rest of columns are move
left/right (this will include the top header row).
I don't know how to do this part, need to borrow your brain for help!
Thank Q very much in advance!
You can check out my test page from
http://amazon.nws.noaa.gov/hads/test/15C2C420.html
Here is basicly what I do
<html><title>Scrollable Table</title><head>
<script language="JavaScript">
var preRow = null;
function changeRow(thisRow) {
if (preRow != null)
preRow.bgColor = "white";
thisRow.bgColor = "cyan";
preRow = thisRow;
}
</script>
<style type="text/css">
tbody { max-height: 30em; overflow: auto; }
th { background-color: lightgrey; }
th.left { background-color: cyan; }
</style></head><body>
<table border=1 width="100%">
<thead>
<tr><th class="left">col1,row1</th>..... <th>coln,row1</th></tr>
</thead>
<tbody>
<tr onClick="changeRow(this)">
<th class="left">col1,row2</th><td>col2,row2</td>......
<td>coln,row2</td></tr>
.....
.....
<tr onClick="changeRow(this)">
<th class="left">col1,rown</th><td>col2,rown</td>......
<td>coln,rown</td></tr>
</tbody>
</table></body></html>
I prefer doing this by CSS, HTML/DHTML/XDHTML, XML and little
Javascript. Java <applet> Swing JTable will be last resource,
because user has different browser, some not support Java 1.x.
And load large data into *.jar for <applet> will take time.
I did some Google search, I found two sites doing this by JavaScript.
But I prefer not to load huge file, run the JavaScript on client site.
I prefer load plain text HTML from server. Of cource, I'll keep mind
open use JavaScript grid as 2nd choice.
Here are those two good sites:
http://www.activewidgets.com/
Above site the most left column is label in sequence row number, like
preadsheet. Not very good.
http://www.theopensourcery.com/jsgrids.htm
