JavaScript支持键盘方向键

//仅供学习使用
//使用说明：请将以下代码复制到文本文件中，然后重命名为html后双击运行。按方向键
//可以了
<style>
tr.highlight{
background:#08246B;
color:white;
}
</style>
<table   border="1"   width="70%"   id="ice">
<tr>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
</tr>
<tr>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
</tr>
<tr>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
</tr>
<tr>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
</tr>
<tr>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
<td><input type='text' value=''/> </td>
</tr>
</table>
  
<script   language="javascript">
<!--
//定义初始化行列
var currentLine=-1;
var currentCol=-1;
document.onkeydown=function(e)   
{
    e=window.event||e;
    switch(e.keyCode)  
    {
case 37: //左键
            currentCol--;
            changeItem();
break;
        case 38: //向上键
            currentLine--;
            changeItem();
            break;
case 39: //右键
            currentCol++;
            changeItem();
            break;
        case 40: //向下键
            currentLine++;
            changeItem();
            break;
        default   :
            break;
    }
}

//方向键调用
function   changeItem()
{  
if(   document.all   )
        var   it   =   document.getElementById("ice").children[0];
    else
        var   it   =   document.getElementById("ice");
 
    for   (i=0;i<it.rows.length;i++)   
    {
        it.rows[i].className   =   "";
    }

    if   (currentLine   <   0)
{
        currentLine   =   it.rows.length   -   1;
}
    if   (currentLine   ==   it.rows.length)
{
        currentLine   =   0;
}

var objtab = document.all.ice;
var objrow=objtab.rows[currentLine].getElementsByTagName("INPUT");

if(currentCol<0)
{
currentCol=objrow.length-1;
}else if(currentCol==objrow.length)
{
currentCol=0;
}
objrow[currentCol].select();
//调试使用
    it.rows[currentLine].className   =   "highlight";
}
  
//-->
</script>
//仅供学习使用