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

您可能感兴趣的文章:

借助javascript代码判断网页是静态还是伪静态
如何看同类型的网站采用的是静态还是伪静态，一般网页后缀都是以.html结尾。我们可以借助一段简单的javascript代码判断一下
2014-05-05
confirm确认对话框的实现方法总结
下面小编就为大家带来一篇confirm确认对话框的实现方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
js操作cookie保存浏览记录的方法
这篇文章主要介绍了js操作cookie保存浏览记录的方法,涉及JavaScript使用cookie记录并保存用户浏览网页信息的实现技巧,需要的朋友可以参考下
2015-12-12
js中hasOwnProperty的属性及实例用法详解
在本篇文章里小编给大家整理的是一篇关于js中hasOwnProperty的属性及实例用法详解内容，有需要的朋友们可以跟着学习下。
2021-11-11
关于二级域名下使用一级域名下的COOKIE的问题
我们通常在使用cookie的时候一般都只是局限在本站内使用，也就是只在一个域名下使用
2011-11-11
IE6 hack for js 集锦
本文主要讲诉了使用js实现网站功能兼容IE6，非常的实用的小技巧，有需要的朋友可以参考下
2014-09-09
js控制淡入淡出示例代码
淡入淡出效果想必大家都有见到过吧，在本文将为大家介绍下使用js如何控制淡入淡出，感兴趣的朋友可以参考下
2013-11-11
JS实现日期加减的方法
这篇文章主要介绍了JS实现日期加减的方法，有需要的朋友可以参考一下
2013-11-11
js获得当前系统日期时间的方法
这篇文章主要介绍了js获得当前系统日期时间的方法,涉及javascript操作日期时间的相关技巧,非常简单实用,需要的朋友可以参考下
2015-05-05
bootstrap-table formatter 使用vue组件的方法
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。这篇文章重点给大家介绍bootstrap-table formatter 使用vue组件的方法，感兴趣的朋友一起看看
2019-05-05

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具