您的当前位置：首页 javascript键盘上下键的操作(选择)_javascript技巧

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

来源：好心意情感网

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

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 = ''; 
 } 
 } 
 } 
 
<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需刷新才能执行]