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

更新时间：2008年06月08日 19:48:13 作者：

不错的使用键盘上下键实现选择的代码，方便用户操作

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

<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>  <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需再刷新一下页面才能执行]

第二段

<table id="tb">   <tr><td>00000000000000</td>   </tr>   <tr><td>11111111111111</td>   </tr>   <tr><td>22222222222222</td></tr>   <tr><td>33333333333333</td></tr>   </table>   <script>   var i=0;   function document.onkeydown(){       if (event.keyCode == 38){           for(var k=0;k<document.getElementById('tb').rows.length;k++){               document.getElementById('tb').rows(k).bgColor="";           }           document.getElementById('tb').rows(--i%tb.rows.length).bgColor="#FF0000";           document.all.show.value=document.getElementById('tb').rows(i%tb.rows.length).innerText;       }       if (event.keyCode== 40){           for(var k=0;k<document.getElementById('tb').rows.length;k++){               document.getElementById('tb').rows(k).bgColor="";           }           document.getElementById('tb').rows(++i%document.getElementById('tb').rows.length).bgColor="#FF0000";           document.all.show.value=document.getElementById('tb').rows(i%tb.rows.length).innerText;           }   }   </script>   <input type="text" name="show" value="do">

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

Document:getElementsByName()使用方法及示例
Document:getElementsByName()想必大家对它并不陌生吧，主要是根据名称获取元素，下面是其具体的使用方法及范例，感兴趣的朋友不要错过
2013-10-10
JavaScript实现的双向跨域插件分享
这篇文章主要介绍了JavaScript实现的双向跨域插件分享,本文实现把整个跨域过程抽象出来,封装成一个JavaScript插件,需要的朋友可以参考下
2015-01-01
javascript函数中的3个高级技巧
这篇文章主要为大家详细介绍了javascript函数中的3个高级技巧,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
JS实现跟随鼠标闪烁转动色块的方法
这篇文章主要介绍了JS实现跟随鼠标闪烁转动色块的方法,涉及javascript操作html元素及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
浅谈pc端rem字体设置的问题
下面小编就为大家带来一篇浅谈pc端rem字体设置的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
JS检测输入字符是否包含非法字符的示例代码
本篇文章主要是对JS检测输入字符是否包含非法字符的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
微信小程序 checkbox使用实例解析
这篇文章主要介绍了微信小程序 checkbox使用实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
javascript返回顶部的按钮实现方法
这篇文章主要介绍了javascript返回顶部的按钮实现方法,需要的朋友可以参考下
2016-01-01
前端JavaScript实现本地模糊搜索功能的方法实例
对于模糊查询,一般都是传关键字给后端,由后端来做。但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验,这篇文章主要给大家介绍了关于前端JavaScript如何实现本地模糊搜索功能的相关资料,需要的朋友可以参考下
2021-07-07
用console.table()调试javascript
昨天我了解到Chrome调试工具一个小巧的调试方法，在WDCC期间， Marcus Ross（@zahlenhelfer）介绍了，chrome调试工具各种调试方法，这个只是其中一种，现在我来给大家秀下。
2014-09-09