JavaScript实现网页上键盘上下键选择功能，不定义的时候，网页默认不会产生此效果，借助JS可轻松实现此功能。为了演示方便，我们加入了部分HTML代码，好了，先来看HTML部分代码，也就是JS要控制此段代码中的表格对象实现键盘上下键选择功能：

<!--先用CSS定义表格TD在鼠标放上后显示光标的效果，这样更形象-->
<style> TD { cursor: hand; } </style>
<!--表格代码部分-->
<table id="oTable" style="width:240px;border:1px highlight solid; font-size:12px;">
     <tr>
         <td style="background-color:#dcdcdc;">鼠标点击或按↑↓改变行的颜色</td>
     </tr>
     <tr>
         <td>鼠标点击或按↑↓改变行的颜色</td>
     </tr>
     <tr>
         <td>鼠标点击或按↑↓改变行的颜色</td>
     </tr>
     <tr>
         <td>鼠标点击或按↑↓改变行的颜色</td>
     </tr>
</table>

下面我们写一段JS代码来实现键盘上下键盘选择功能：

<Script Language="JScript">
function document.onkeydown(){
   var rowsArray = document.all('oTable').rows;
   for(var i=0;i<rowsArray.length;i++){
        if(rowsArray[i].children[0].style.backgroundColor=='#dcdcdc'){
           switch(window.event.keyCode){
               case 38 :
                   if(i-1>=0){
                     rowsArray[i-1].children[0].style.backgroundColor = '#dcdcdc'; 
                     rowsArray[i].children[0].style.backgroundColor = '';
                   }
                   break;
               case 40 :
                   if(i+1<=rowsArray.length-1){
                      rowsArray[i+1].children[0].style.backgroundColor = '#dcdcdc';  
                      rowsArray[i].children[0].style.backgroundColor = '';
                   }
                   break;
           }
           break;
        }
   }
}
function document.onclick(){
    if(window.event.srcElement.tagName!='TD'){ return; }
    var rowsArray = document.all('oTable').rows;
    for(var i=0;i<rowsArray.length;i++){
         if(rowsArray[i].cells[0]==window.event.srcElement){
            rowsArray[i].cells[0].style.backgroundColor = '#dcdcdc';
         }else{
            rowsArray[i].cells[0].style.backgroundColor = '';
         }
    }          
}
</Script>

你可将上述几段代码复制保存成HTML代码查看效果。