By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,423 Members | 2,466 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,423 IT Pros & Developers. It's quick & easy.

best practice for navigating through a table with arrow keys?

P: n/a
PJ6
When I hit an arrow key, I want to be able to change the focus from cell to
cell just like in Excel. I see two ways of doing this. First, emitting in
script a function call in each cell on key down that specifically lists the
ID's of the adjacent controls. The second is to somehow put in some
navigation information into the ID's themselves and then loop through them
on key press to try to calculate which cell to go to next. Which is the
better technique? Are there others that may be better?

TIA,
Paul
Dec 3 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
"PJ6" <no****@nowhere.net> wrote in message
news:Mqlkf.2647$1y.2159@trnddc07...
When I hit an arrow key, I want to be able to change the focus from cell to cell just like in Excel. I see two ways of doing this. First, emitting in
script a function call in each cell on key down that specifically lists the ID's of the adjacent controls. The second is to somehow put in some
navigation information into the ID's themselves and then loop through them
on key press to try to calculate which cell to go to next. Which is the
better technique? Are there others that may be better?

TIA,
Paul

Will this help? Watch for word-wrap. Test "as-is".

<html>
<head>
<title>arrows.htm</title>
<script type="text/javascript">
var b4 = "";
var col = 1;
var row = 1;
document.onkeyup = function() {
if (window.event) {
var key = window.event.keyCode;
window.status = key;
if (key == 37) { // left arrow
if (col > 1) col--;
} else if (key == 38) { // up arrow
if (row > 1) row--;
} else if (key == 39) { // right arrow
if (col < 5) col++;
} else if (key == 40) { // down arrow
if (row < 5) row++;
}
bg();
}
}
function bg() {
var rc = "r" + row + "c" + col;
if (b4 == "") b4 = rc;
document.getElementById(b4).style.backgroundColor = "white";
document.getElementById(rc).style.backgroundColor = "yellow";
b4 = rc;
}
</script>
</head>
<body onload="bg()">
<table border="1" width="500">
<tr height="75">
<th bgcolor="#FFFFFF" width="75"><sup>Use<br>Arrow<br>Keys</sup></th>
<th bgcolor="#EEEEEE" width="75"><sup>Col 1</sup></th>
<th bgcolor="#EEEEEE" width="75"><sup>Col 2</sup></th>
<th bgcolor="#EEEEEE" width="75"><sup>Col 3</sup></th>
<th bgcolor="#EEEEEE" width="75"><sup>Col 4</sup></th>
<th bgcolor="#EEEEEE" width="75"><sup>Col 5</sup></th>
</tr>
<tr height="75">
<th bgcolor="#EEEEEE"><sup>Row 1</sup></th>
<th id="r1c1">&nbsp;</th>
<th id="r1c2">&nbsp;</th>
<th id="r1c3">&nbsp;</th>
<th id="r1c4">&nbsp;</th>
<th id="r1c5">&nbsp;</th>
</tr>
<tr height="75">
<th bgcolor="#EEEEEE"><sup>Row 2</sup></th>
<th id="r2c1">&nbsp;</th>
<th id="r2c2">&nbsp;</th>
<th id="r2c3">&nbsp;</th>
<th id="r2c4">&nbsp;</th>
<th id="r2c5">&nbsp;</th>
</tr>
<tr height="75">
<th bgcolor="#EEEEEE"><sup>Row 3</sup></th>
<th id="r3c1">&nbsp;</th>
<th id="r3c2">&nbsp;</th>
<th id="r3c3">&nbsp;</th>
<th id="r3c4">&nbsp;</th>
<th id="r3c5">&nbsp;</th>
</tr>
<tr height="75">
<th bgcolor="#EEEEEE"><sup>Row 4</sup></th>
<th id="r4c1">&nbsp;</th>
<th id="r4c2">&nbsp;</th>
<th id="r4c3">&nbsp;</th>
<th id="r4c4">&nbsp;</th>
<th id="r4c5">&nbsp;</th>
</tr>
<tr height="75">
<th bgcolor="#EEEEEE"><sup>Row 5</sup></th>
<th id="r5c1">&nbsp;</th>
<th id="r5c2">&nbsp;</th>
<th id="r5c3">&nbsp;</th>
<th id="r5c4">&nbsp;</th>
<th id="r5c5">&nbsp;</th>
</tr>
</table>
</body>
</html>
Dec 3 '05 #2

P: n/a
PJ6
Yeah that works. I'll go with that variation then.

Thanks,
Paul

"McKirahan" <Ne**@McKirahan.com> wrote in message
news:eb********************@comcast.com...
"PJ6" <no****@nowhere.net> wrote in message
news:Mqlkf.2647$1y.2159@trnddc07...
When I hit an arrow key, I want to be able to change the focus from cell

to
cell just like in Excel. I see two ways of doing this. First, emitting in
script a function call in each cell on key down that specifically lists

the
ID's of the adjacent controls. The second is to somehow put in some
navigation information into the ID's themselves and then loop through
them
on key press to try to calculate which cell to go to next. Which is the
better technique? Are there others that may be better?

TIA,
Paul

Will this help? Watch for word-wrap. Test "as-is".

<html>
<head>
<title>arrows.htm</title>
<script type="text/javascript">
var b4 = "";
var col = 1;
var row = 1;
document.onkeyup = function() {
if (window.event) {
var key = window.event.keyCode;
window.status = key;
if (key == 37) { // left arrow
if (col > 1) col--;
} else if (key == 38) { // up arrow
if (row > 1) row--;
} else if (key == 39) { // right arrow
if (col < 5) col++;
} else if (key == 40) { // down arrow
if (row < 5) row++;
}
bg();
}
}
function bg() {
var rc = "r" + row + "c" + col;
if (b4 == "") b4 = rc;
document.getElementById(b4).style.backgroundColor = "white";
document.getElementById(rc).style.backgroundColor = "yellow";
b4 = rc;
}
</script>
</head>
<body onload="bg()">
<table border="1" width="500">
<tr height="75">
<th bgcolor="#FFFFFF" width="75"><sup>Use<br>Arrow<br>Keys</sup></th>
<th bgcolor="#EEEEEE" width="75"><sup>Col 1</sup></th>
<th bgcolor="#EEEEEE" width="75"><sup>Col 2</sup></th>
<th bgcolor="#EEEEEE" width="75"><sup>Col 3</sup></th>
<th bgcolor="#EEEEEE" width="75"><sup>Col 4</sup></th>
<th bgcolor="#EEEEEE" width="75"><sup>Col 5</sup></th>
</tr>
<tr height="75">
<th bgcolor="#EEEEEE"><sup>Row 1</sup></th>
<th id="r1c1">&nbsp;</th>
<th id="r1c2">&nbsp;</th>
<th id="r1c3">&nbsp;</th>
<th id="r1c4">&nbsp;</th>
<th id="r1c5">&nbsp;</th>
</tr>
<tr height="75">
<th bgcolor="#EEEEEE"><sup>Row 2</sup></th>
<th id="r2c1">&nbsp;</th>
<th id="r2c2">&nbsp;</th>
<th id="r2c3">&nbsp;</th>
<th id="r2c4">&nbsp;</th>
<th id="r2c5">&nbsp;</th>
</tr>
<tr height="75">
<th bgcolor="#EEEEEE"><sup>Row 3</sup></th>
<th id="r3c1">&nbsp;</th>
<th id="r3c2">&nbsp;</th>
<th id="r3c3">&nbsp;</th>
<th id="r3c4">&nbsp;</th>
<th id="r3c5">&nbsp;</th>
</tr>
<tr height="75">
<th bgcolor="#EEEEEE"><sup>Row 4</sup></th>
<th id="r4c1">&nbsp;</th>
<th id="r4c2">&nbsp;</th>
<th id="r4c3">&nbsp;</th>
<th id="r4c4">&nbsp;</th>
<th id="r4c5">&nbsp;</th>
</tr>
<tr height="75">
<th bgcolor="#EEEEEE"><sup>Row 5</sup></th>
<th id="r5c1">&nbsp;</th>
<th id="r5c2">&nbsp;</th>
<th id="r5c3">&nbsp;</th>
<th id="r5c4">&nbsp;</th>
<th id="r5c5">&nbsp;</th>
</tr>
</table>
</body>
</html>

Dec 3 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.