Thanks!
Using Navigation keys to Move Through an HTML Table
Moderator: General Moderators
Using Navigation keys to Move Through an HTML Table
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
. Can anyone help me out with that?
Thanks!
Thanks!
- 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
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.
* 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.
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.
* 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.
Re: Using Navigation keys to Move Through an HTML Table
It is quite possible. You need to do the following for the four arrow events: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![]()
. Can anyone help me out with that?
Thanks!
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.