Navigate table rows using arrow keys

skipc · Aug 26, 2005

Hi,

I am stuck... I've got a popup window that displays a list in table
format with links on the bottom to navigate the list <prev> 1 2 3 ...
<next>

When I demo'd to the users... they immediately asked if they could use
the arrow keys and enter key to navigate the list. I think there must
be a way to do this, but I can't figure it out.

Has anyone out there done this? I would like to keep the mouse
navigation but add the ability to navigate using the keyboard.

Thanks! D

tom · Aug 26, 2005

Yes, you can do that...

yo need to capture the key pressed by user, i recommend check this
page, there you can find the way to do that

http://www.geekpedia.com/tutorial138_Get-key-press-event-using-JavaScript.html

After you have gotten the key, you can move the focus from one link to
another, in a little javascript function.

regards,
Tom

skipc · Aug 26, 2005

Tom,
Thanks. That helps. I think I've got all the pieces. I think I have to
figure out which row in the table the user is on, add or decrement and
focus on the new row. I will keep working on it.

-D

RobG · Aug 27, 2005

tom said:
Yes, you can do that...

yo need to capture the key pressed by user, i recommend check this
page, there you can find the way to do that

http://www.geekpedia.com/tutorial138_Get-key-press-event-using-JavaScript.html

That script could be somewhat more compact as:

<script type="text/javascript">

var keys = { 16:'shift', 17:'Ctrl', 18:'Alt', 19:'Pause',
37:'Arrow Left', 38:'Arrow Up', 39:'Arrow Right',
40:'Arrow Down'
}

function KeyCheck( e ) {
var msg = document.getElementById('xx');
var e = e || event ;
msg.innerHTML = keys[e.keyCode] || '';
}

</script>
</head>
<body onkeyup="KeyCheck(event);">
<p>The key you pressed was:
c</p>
</body>

[...]

ASM · Aug 27, 2005

RobG said:
That script could be somewhat more compact as:

<script type="text/javascript">

var keys = { 16:'shift', 17:'Ctrl', 18:'Alt', 19:'Pause',
37:'Arrow Left', 38:'Arrow Up', 39:'Arrow Right',
40:'Arrow Down'
}

Waou ! wonderful !
Is it an array ? object ? whatelse ?

function KeyCheck( e ) {
var msg = document.getElementById('xx');
var e = e || event ;
msg.innerHTML = keys[e.keyCode] || '';

msg.innerHTML = keys[e.keyCode] || e.keyCode;

would be instersting to see some key codes

}

</script>
</head>
<body onkeyup="KeyCheck(event);">
<p>The key you pressed was:
c</p>
</body>

document.getElementById('xx') outside with the dog ?

RobG · Aug 28, 2005

ASM said:
Waou ! wonderful !
Is it an array ? object ? whatelse ?

I think it's an object, my browser agrees. ;-)

Another way is:

var keys = new Object();
keys[16] = 'shift';
keys[17] = 'Ctrl';
...

But I like my way 'cos it's much more concise, though sometimes the
longer method is better for maintenance reasons 'cos it's a bit more
readable.

I'm sure there's a French equivalent for 'to each her own'. All I can
think of is 'Que sera sera' which doesn't seem appropriate...

[...]

document.getElementById('xx') outside with the dog ?

If I had a dog it would have died of a persecution complex long ago. it
seems my fingers forgot to type everything my brain told them to.

"I've done my homework, I just haven't written it down yet" :-x

Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Getting extra blank rows from appending HTML..?	2	Oct 24, 2023
arrow keys through list of div cursor links	5	Jul 16, 2008
Football league table	0	Aug 21, 2022
User input - get keystrokes (arrow keys + shift)	1	May 22, 2011
Detecting Arrow Keys	4	Dec 31, 2007
Only one table shows up with the information	2	Mar 29, 2023
How to add dropdown selected data to table using jquery	2	Jul 2, 2022

Navigate table rows using arrow keys

skipc

tom

skipc

RobG

ASM

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads