PJ6 said:
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"> </th>
<th id="r1c2"> </th>
<th id="r1c3"> </th>
<th id="r1c4"> </th>
<th id="r1c5"> </th>
</tr>
<tr height="75">
<th bgcolor="#EEEEEE"><sup>Row 2</sup></th>
<th id="r2c1"> </th>
<th id="r2c2"> </th>
<th id="r2c3"> </th>
<th id="r2c4"> </th>
<th id="r2c5"> </th>
</tr>
<tr height="75">
<th bgcolor="#EEEEEE"><sup>Row 3</sup></th>
<th id="r3c1"> </th>
<th id="r3c2"> </th>
<th id="r3c3"> </th>
<th id="r3c4"> </th>
<th id="r3c5"> </th>
</tr>
<tr height="75">
<th bgcolor="#EEEEEE"><sup>Row 4</sup></th>
<th id="r4c1"> </th>
<th id="r4c2"> </th>
<th id="r4c3"> </th>
<th id="r4c4"> </th>
<th id="r4c5"> </th>
</tr>
<tr height="75">
<th bgcolor="#EEEEEE"><sup>Row 5</sup></th>
<th id="r5c1"> </th>
<th id="r5c2"> </th>
<th id="r5c3"> </th>
<th id="r5c4"> </th>
<th id="r5c5"> </th>
</tr>
</table>
</body>
</html>
