Using Navigation keys to Move Through an HTML Table

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
emmbec
Forum Contributor
Posts: 112
Joined: Thu Sep 21, 2006 12:19 pm
Location: Queretaro, Mexico

Using Navigation keys to Move Through an HTML Table

Post by emmbec »

Is it even possible to navigate in an HTML table using the arrow keys? I want to do this since I have some information in a database and I display a table with t hat information, the reason why I would like to use the arrow keys instead of TAB is that my dumb users are so used to excel that they would like to navigate through the table using the arrow keys :crazy: :banghead: . Can anyone help me out with that?

Thanks!
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: Using Navigation keys to Move Through an HTML Table

Post by JAB Creations »

If the logic of the values of your (X)HTML id is sound you certainly could program just such a script.

For example let's say you have the following rows and columns of IDs...

01_01, 01_02, 01_03, 01_04, 01_05, 01_06, 01_07, 01_08
02_01, 02_02, 02_03, 02_04, 02_05, 02_06, 02_07, 02_08
03_01, 03_02, 03_03, 03_04, 03_05, 03_06, 03_07, 03_08
04_01, 04_02, 04_03, 04_04, 04_05, 04_06, 04_07, 04_08
05_01, 05_02, 05_03, 05_04, 05_05, 05_06, 05_07, 05_08

Since JavaScript is very flexible you can convert getElementById in to a variable, split it at _, and then simply do the math from there. If you're at 03_06 and press up you're simply subtracting from the first piece of the split. If you're at 03_06 and press right you simply add one to the second piece of the split.

It'd take some time to program and it would require a logical set of id values though it certainly could be done. The only problem is since IE does not support the addEventListener DOM2 object (nor will IE8 final support it while Opera 9.0, Safari 3.0, and Firefox 1.5 and greater all do) you'd probably have to use the (X)HTML attribute onkeypress to trigger the function.

If it's important I wouldn't mind helping you construct the script over the weekend. 8)

* Edit * Actually ID's must start with a letter however that would just require using two splits unless there is a length split like there is in PHP...not sure but it's all very possible.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Using Navigation keys to Move Through an HTML Table

Post by Eran »

emmbec wrote:Is it even possible to navigate in an HTML table using the arrow keys? I want to do this since I have some information in a database and I display a table with t hat information, the reason why I would like to use the arrow keys instead of TAB is that my dumb users are so used to excel that they would like to navigate through the table using the arrow keys :crazy: :banghead: . Can anyone help me out with that?

Thanks!
It is quite possible. You need to do the following for the four arrow events:
1. On up keypress - Check if there is a row above the current one that has focus and move the focus there. If there is no such row, move the focus to the bottom row.
2. On down keypress - Do the same as the up keypress only in reverse.
3. On left keypress - Check if there is an input to the left of the one that has focus and move the focus there. If there is no such input, move the focus to the next row.
4. On right keypress - Do the same as the left keypress only in reverse.

Using a library like jQuery would really help you, as it makes traversing the DOM much easier than plain javascript.
Post Reply