PDA

Click to See Complete Forum and Search --> : Keeping one column static while other scroll

andrew_123
12-04-2003, 11:47 PM
I have a JSP page in which I am displaying data in the form of HTML table.
<TABLE>
<TR>
<TH>ID</TH>
<TH>NAME</TH>
...
<TH>ADDRESS</TH>
</TR>
<TR>
<TD><%=rs.getString("id")%></TD>
<TD><%=rs.getString("name")%></TD>
...
<TD><%=rs.getString("address")%></TD>
</TR>
</TABLE>
The problem is there are large number of columns. To view all of them the user needs to scroll horizontally and then he/she looses view of the primary key column.
Say "Address" is the 15 column. To view it user scrolls horizontally but then he/she is not able to make out for which "id" this address is. I want that the "id" column always stays where it is while others move horizontally.
Plz help as to how this can be done.
Gollum
12-05-2003, 05:53 AM
There are two alternatives I can think of...

1: Put your primary key in a table of its own on the left hand side and the rest of the table inside a DIV with overrun=scroll on the right. A problem with this one is you have to have some way to make sure the cell heights are the same in the two tables.

2: Implement your own 'scroll' system with next and prev buttons that moves your view of the data left and right but keeps the primary key always visible in the first column.
andrew_123
12-05-2003, 06:23 AM
Thanks for ur reply.
Could u plz elaborate the second method. How can I implement my own scrolling mechanism??
Gollum
12-05-2003, 06:42 AM
have a play with this code

<html>
<head>

<script type="text/javascript">
//<!--

var data =
[
["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
["i", "ii", "iii", "iv", "v", "vi", "vii", "viii", "ix", "x"]
];

var aCells = null;
var nOffset = 0;
function step(d)
{
if ( !aCells )
{
aCells = new Array;
var oTable = document.getElementById("t");
var aTR = oTable.getElementsByTagName("tr");
for ( var i = 0; i < 3; i++ )
aCells.push(aTR[i].getElementsByTagName("td"));
}

nOffset += d;
if ( nOffset < 0 ) nOffset = 0;
if ( nOffset > 7 ) nOffset = 7;

for ( i = 0; i < 3; i++ )
for ( var j = 0; j < 3; j++ )
aCells[i][j].innerHTML = data[i][j+nOffset];
}

//-->
</script>
</head>
<body onload="step(0);">
<table id=t border=1>
<tr>
<th>Numbers</th>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<th>Letters</th>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<th>Roman</th>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table>
<br>
<button onclick="step(-10);">Start</button>
<button onclick="step(-1);">Left</button>
<button onclick="step(1);">Right</button>
<button onclick="step(10);">End</button>
</body>
</html>

It's not very generic, but the general prinicple is there.
andrew_123
12-05-2003, 07:06 AM
Thanks for ur code.
I'll check it out and get back to u
andrew_123
12-05-2003, 10:53 PM
Thank you so much for ur code. It was a gr8 help
;)