由于项目需要，在table列数很多，需要填写的数据量多时，往往需要用方向键来控制焦点的位置，所以就写了一个。由于keyCode的原因，目前不兼容火狐！
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
td
{
border:1px #ff0000 solid;
}
</style>
<script type="text/javascript" language="javascript">
document.onkeydown = function () {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
var td1 = document.activeElement.parentNode;
var tr1 = td1.parentNode;
var t1 = tr1.parentNode;
var rows = t1.rows;
var cells = tr1.cells;
var j = td1.cellIndex;
var i = tr1.rowIndex;
var inputs = "";
switch (event.keyCode) {
case 37:
if (j - 1 < 0)
return false;
if (rows[i].cells[j - 1].childNodes.length != 0) {
inputs = rows[i].cells[j - 1].childNodes;
}
break;
case 38:
if (i - 1 < 0)
return false;
if (rows[i - 1].cells[j].childNodes.length != 0) {
inputs = rows[i - 1].cells[j].childNodes;
}
break;
case 39:
if (j + 1 >= cells.length)
return false;
if (rows[i].cells[j + 1].childNodes.length != 0) {
inputs = rows[i].cells[j + 1].childNodes;
}
break;
case 40:
if (i + 1 >= rows.length)
return false;
if (rows[i + 1].cells[j].childNodes.length != 0) {
inputs = rows[i + 1].cells[j].childNodes;
}
break;
}
if (inputs != "") {
for (var k = 0; k < inputs.length; k++) {
if (inputs[k].type == "text") {
inputs[k].focus();
}
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<center>
<table cellpadding="0" cellspacing="0"style="border:1px solid red;" width="600">
<tr>
<td></td>
<td><input id="Text1" type="button" style="width:70px" value="11"/></td>
<td><input id="Text2" type="button" style="width:70px" value="12" /></td>
<td><input id="Text3" type="button" style="width:70px" value="13" /></td>
<td><input id="Text4" type="button" style="width:70px" value="14" /></td>
<td><input id="Text5" type="button" style="width:70px" value="15" /></td>
<td><input id="Text6" type="button" style="width:70px" value="16" /></td>
<td><input id="btn9" type="button" style="width:70px" value="17" /></td>
</tr>
<tr>
<td></td>
<td><input id="t1_1" type="text" style="width:70px" value="11"/></td>
<td><input id="t1_2" type="text" style="width:70px" value="12" /></td>
<td><input id="t1_3" type="text" style="width:70px" value="13" /></td>
<td><input id="t1_4" type="text" style="width:70px" value="14" /></td>
<td><input id="t1_5" type="text" style="width:70px" value="15" /></td>
<td><input id="t1_6" type="text" style="width:70px" value="16" /></td>
<td><input id="btn7" type="button" style="width:70px" value="17" /></td>
</tr>
<tr>
<td><input id="btn5" type="button" style="width:70px" value="17" /></td>
<td><input id="t2_1" type="text" style="width:70px" value="21" /></td>
<td><input id="t2_2" type="text" style="width:70px" value="22" /></td>
<td><input id="t2_3" type="text" style="width:70px" value="23" /></td>
<td><input id="t2_4" type="text" style="width:70px" value="24" /></td>
<td><input id="t2_5" type="text" style="width:70px" value="25" /></td>
<td><input id="t2_6" type="text" style="width:70px" value="26" /></td>
<td><input id="btn6" type="button" style="width:70px" value="17" /></td>
</tr>
<tr>
<td><input id="btn1" type="button" style="width:70px" value="17" /></td>
<td><input id="t3_1" type="text" style="width:70px" value="31" /></td>
<td><input id="t3_2" type="text" style="width:70px" value="32" /></td>
<td><input id="t3_3" type="text" style="width:70px" value="33" /></td>
<td><input id="t3_4" type="text" style="width:70px" value="34" /></td>
<td><input id="t3_5" type="text" style="width:70px" value="3-5" /></td>
<td><input id="t3_6" type="text" style="width:70px" value="3-6" /></td>
<td><input id="btn2" type="button" style="width:70px" value="1-7" /></td>
</tr>
<tr>
<td><input id="btn4" type="button" style="width:70px" value="1-7" /></td>
<td><input id="t4_1" type="text" style="width:70px" value="4-1" /></td>
<td><input id="t4_2" type="text" style="width:70px" value="4-2" /></td>
<td><input id="t4_3" type="text" style="width:70px" value="4-3" /></td>
<td><input id="t4_4" type="text" style="width:70px" value="4-4" /></td>
<td><input id="t4_5" type="text" style="width:70px" value="4-5" /></td>
<td><input id="t4_6" type="text" style="width:70px" value="4-6" /></td>
<td><input id="btn3" type="button" style="width:70px" value="1-7" /></td>
</tr>
<tr>
<td><input id="btn10" type="button" style="width:70px" value="1-7" /></td>
<td><input id="btn11" type="button" style="width:70px" value="1-1"/></td>
<td><input id="btn12" type="button" style="width:70px" value="1-2" /></td>
<td><input id="btn13" type="button" style="width:70px" value="1-3" /></td>
<td><input id="btn14" type="button" style="width:70px" value="1-4" /></td>
<td><input id="btn15" type="button" style="width:70px" value="1-5" /></td>
<td><input id="btn16" type="button" style="width:70px" value="1-6" /></td>
<td><input id="btn17" type="button" style="width:70px" value="1-7" /></td>
</tr>
</table>
</center>
</div>
</form>
</body>
</html>