This week's book giveaway is in the Servlets forum.
We're giving away four copies of Murach's Java Servlets and JSP and have Joel Murach on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes Using Up/Down Arrow Key to Move in a table Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Using Up/Down Arrow Key to Move in a table" Watch "Using Up/Down Arrow Key to Move in a table" New topic
Author

Using Up/Down Arrow Key to Move in a table

JiaPei Jen
Ranch Hand

Joined: Nov 19, 2000
Posts: 1309
I am facing a challenge.

I put a data table inside the <div ....> tag. And I have created a scrollbar for the <div ...> tag.

The height of the <div ...> is set to display a certain number of rows of the data table for viewing. Let's say that I can see 10 rows within the <div ....>.

The challenge is that I must also use the up/down arrow keys on the keyboard to view all the rows in that table. The requirements are:

1. The first row of the table must be highlighted when the web page is brought up to the screen.

2. Pressing the down arrow key once moves the highlighter to the second row of the table; so on so forth.

3. When the highlighter is on the 10th row of the table, pressing the down arrow key will bring the 11th to 20th rows of the table for viewing and the highlighter will be on the 11th row of the table.

4. It keeps going util the last set of rows (maybe less than 10) are brought up to the screen.

5. The up arrow key works in a similar way.

I have surfed on the internet and found

http://www.tipstrs.com/tip/799/Scrolling-HTML-elements-using-the-keyboard
http://www.codeproject.com/jscript/WithHorizontalScrollbar.asp

but they are not exactly what I am looking for.

Does a re-usable code exist?
[ July 02, 2007: Message edited by: Bear Bibeault ]
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

I looked at the first link you posted. I am thinking that is almost exactly what you want. The only bits you need to modify are, instead of scrolling the DIV on every down/up, highlight the appropriate row in your table and at the same time checking which row you are on. If you know on the 11th row you need to scroll that to the top, then use the methods available to scroll that row to the top.

What have you tried?


GenRocket - Experts at Building Test Data
JiaPei Jen
Ranch Hand

Joined: Nov 19, 2000
Posts: 1309
I have been struggling to use keyboard keys to scroll rows of a table up or down one at a time (I have a vertical scrollbar at right hand side of a table.)

I first highlight the first row of the table when the page is loaded. It is working now.

Then, I tried to work out some JavaScript code to move the highlighter up or down by pressing the keyboard up arrow key or down arrow key. The code is not working. Would someone kindly take a look at the code:
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Did you look at the example code Eric provided for you here? I believe it does what you want, except for the scrolling part.
JiaPei Jen
Ranch Hand

Joined: Nov 19, 2000
Posts: 1309
But, it is the "scrolling" part I am really after. Scrolling is the user requirement on which I am working.
JiaPei Jen
Ranch Hand

Joined: Nov 19, 2000
Posts: 1309
Hi, I have made something work - I am able to use the keyboard down arrow key to highlight the next row in the table or use the keyboard up arrow key to highlight the previous row in the table. And When the page is loaded, the first row of the table is automatically highlighted (see the code shown below.)

But, there are two problems:

1. Before I use the keyboard keys to scroll rows one at a time, I have to de-highlight the first row and re-highlight the first row of the table using the mouse. Does it mean that my table is not "on focus" when the page is loaded? How do I set the focus to the table?

2. I can use the down/up arrow keys to scroll rows one at a time. However, I have 10 rows on display within the <div> when the page is loaded (and the table has a couple hundreds of rows.) I want to keep those 10 rows on the screen when I am moving downwardly until I reached the 10th row. That is to sasy, when the highlighter is on the 10th row and I press the down arrow key, then the first row retires from view and the 11th row comes into view. I am still unable to figure it out how to do it.

If someone could kindly help.
JiaPei Jen
Ranch Hand

Joined: Nov 19, 2000
Posts: 1309
I have tried to set the focus when the page is loaded:

Then my first row is no longer highlighted when the page is loaded. And other JavaScript functions stops working.

I tried to put:

instead. However, I do not know where to put my anchor; i.e. <a ...></a>
JiaPei Jen
Ranch Hand

Joined: Nov 19, 2000
Posts: 1309
I have solved my first problem - set focus on the table when the web page is loaded. The solution is:

in addition to specify the attribute:

for the <table ....> tag, I have to put

in my JavaScript.

I am still struggling with my second problem. I am able to use the keyboard down arrow key and up arrow key to move down and up rows in the table one at a time with the current row highlighted.

But, I am still short of what I want to achieve - I set the height of my DIV to have 10 rows for viewing. And my table has about 200 rows. I want to keep the first 10 rows in the viewing area until I press the down arrow key the 11th time. At that juncture, the 11th to 20th row should be moved to the viewing area. So on and so forth. My code is shown below. I need ideas to modify my code. Thank you.
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Using Up/Down Arrow Key to Move in a table
 
Similar Threads
On Key Press select a row in table
Scrolling table by Arrow keys
Scroll Rows of a Table One at a Time
How to Detect the Highlighted Row Has Reached the Top of a Table?
JTable and tab order.