Keeping one column static while other scroll

@andrew_123Dec 05.2003

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.

to post a comment

JavaScript

@GollumDec 05.2003 — #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_123authorDec 05.2003 — #Thanks for ur reply.

Could u plz elaborate the second method. How can I implement my own scrolling mechanism??

@GollumDec 05.2003 — #have a play with this code

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 
 &lt;script type="text/javascript"&gt;
 //&lt;!--
 
 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 &lt; 3; i++ )
 aCells.push(aTR[i].getElementsByTagName("td"));
 }
 
 nOffset += d;
 if ( nOffset &lt; 0 ) nOffset = 0;
 if ( nOffset &gt; 7 ) nOffset = 7;
 
 for ( i = 0; i &lt; 3; i++ )
 for ( var j = 0; j &lt; 3; j++ )
 aCells[i][j].innerHTML = data[i][j+nOffset];
 }
 
 //--&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="step(0);"&gt;
 &lt;table id=t border=1&gt;
 &lt;tr&gt;
 &lt;th&gt;Numbers&lt;/th&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;th&gt;Letters&lt;/th&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;th&gt;Roman&lt;/th&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;br&gt;
 &lt;button onclick="step(-10);"&gt;Start&lt;/button&gt;
 &lt;button onclick="step(-1);"&gt;Left&lt;/button&gt;
 &lt;button onclick="step(1);"&gt;Right&lt;/button&gt;
 &lt;button onclick="step(10);"&gt;End&lt;/button&gt;
 &lt;/body&gt;
 &lt;/html&gt;

It's not very generic, but the general prinicple is there.

@andrew_123authorDec 05.2003 — #Thanks for ur code.

I'll check it out and get back to u

@andrew_123authorDec 06.2003 — #Thank you so much for ur code. It was a gr8 help

?

Keeping one column static while other scroll

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Keeping one column static while other scroll

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴