javascript键盘上下键的操作(选择)

　　两段使用键盘的上下键进行选择的代码：

　　第一段

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CScript%20Language%3D%22JScript%22%3E%20%20%0D%0A%20%20%20%20%20%20function%20document.onkeydown()%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20var%20rowsArray%20%3D%20document.all('oTable').rows%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3CrowsArray.length%3Bi%2B%2B)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(rowsArray%5Bi%5D.children%5B0%5D.style.backgroundColor%3D%3D'%23dcdcdc')%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20switch(window.event.keyCode)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20case%2038%20%3A%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(i-1%3E%3D0)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20rowsArray%5Bi-1%5D.children%5B0%5D.style.backgroundColor%20%3D%20'%23dcdcdc'%3B%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20rowsArray%5Bi%5D.children%5B0%5D.style.backgroundColor%20%3D%20''%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20case%2040%20%3A%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(i%2B1%3C%3DrowsArray.length-1)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20rowsArray%5Bi%2B1%5D.children%5B0%5D.style.backgroundColor%20%3D%20'%23dcdcdc'%3B%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20rowsArray%5Bi%5D.children%5B0%5D.style.backgroundColor%20%3D%20''%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20function%20document.onclick()%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20if(window.event.srcElement.tagName!%3D'TD')%7B%20return%3B%20%7D%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20var%20rowsArray%20%3D%20document.all('oTable').rows%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3CrowsArray.length%3Bi%2B%2B)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(rowsArray%5Bi%5D.cells%5B0%5D%3D%3Dwindow.event.srcElement)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20rowsArray%5Bi%5D.cells%5B0%5D.style.backgroundColor%20%3D%20'%23dcdcdc'%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20rowsArray%5Bi%5D.cells%5B0%5D.style.backgroundColor%20%3D%20''%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%7D%20%20%0D%0A%3C%2FScript%3E">  
<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>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　第二段

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程