<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function() {
var dom = (function() {
var traversal = "firstElementChild" in document.body;
return {
next: traversal ? function(node) {
return node.nextElementSibling;
} : function(node) {
var next = node.nextSibling;
while(next && next.nodeType !== 1) {
next = next.nextSibling;
}
return next;
},
prev: traversal ? function(node) {
return node.previousElementSibling;
} : function(node) {
var prev = node.previousSibling;
while(prev && prev.nodeType !== 1) {
prev = prev.previousSibling;
}
return prev;
}
};
}());
function setFocus(e) {
e = e || window.event;
if(e.keyCode == 38 || e.keyCode == 40) {
var cell = this.parentNode;
var row = dom[e.keyCode == 38 ? "prev" : "next"](cell.parentNode);
if(row) {
row.getElementsByTagName("input")[cell.cellIndex].focus();
}
}
}
var list = document.getElementById("grid").getElementsByTagName("input");
var i = list.length;
while(i--) {
list[i].onkeydown = setFocus;
}
};
</script>
</head>
<body>
<div>
<table id="grid" summary="">
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>