javascript鍵盤上下鍵的操作(選擇)

更新時間：2008年06月08日 19:48:13 作者：

不錯的使用鍵盤上下鍵實現(xiàn)選擇的代碼，方便用戶操作

兩段使用鍵盤的上下鍵進行選擇的代碼：
第一段

<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需再刷新一下頁面才能執(zhí)行]

第二段

<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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

借助javascript代碼判斷網(wǎng)頁是靜態(tài)還是偽靜態(tài)
如何看同類型的網(wǎng)站采用的是靜態(tài)還是偽靜態(tài)，一般網(wǎng)頁后綴都是以.html結尾。我們可以借助一段簡單的javascript代碼判斷一下
2014-05-05
confirm確認對話框的實現(xiàn)方法總結
下面小編就為大家?guī)硪黄猚onfirm確認對話框的實現(xiàn)方法總結。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
js操作cookie保存瀏覽記錄的方法
這篇文章主要介紹了js操作cookie保存瀏覽記錄的方法,涉及JavaScript使用cookie記錄并保存用戶瀏覽網(wǎng)頁信息的實現(xiàn)技巧,需要的朋友可以參考下
2015-12-12
js中hasOwnProperty的屬性及實例用法詳解
在本篇文章里小編給大家整理的是一篇關于js中hasOwnProperty的屬性及實例用法詳解內(nèi)容，有需要的朋友們可以跟著學習下。
2021-11-11
關于二級域名下使用一級域名下的COOKIE的問題
我們通常在使用cookie的時候一般都只是局限在本站內(nèi)使用，也就是只在一個域名下使用
2011-11-11
IE6 hack for js 集錦
本文主要講訴了使用js實現(xiàn)網(wǎng)站功能兼容IE6，非常的實用的小技巧，有需要的朋友可以參考下
2014-09-09
js控制淡入淡出示例代碼
淡入淡出效果想必大家都有見到過吧，在本文將為大家介紹下使用js如何控制淡入淡出，感興趣的朋友可以參考下
2013-11-11
JS實現(xiàn)日期加減的方法
這篇文章主要介紹了JS實現(xiàn)日期加減的方法，有需要的朋友可以參考一下
2013-11-11
js獲得當前系統(tǒng)日期時間的方法
這篇文章主要介紹了js獲得當前系統(tǒng)日期時間的方法,涉及javascript操作日期時間的相關技巧,非常簡單實用,需要的朋友可以參考下
2015-05-05
bootstrap-table formatter 使用vue組件的方法
Bootstrap table是國人開發(fā)的一款基于 Bootstrap 的 jQuery 表格插件，通過簡單的設置，就可以擁有強大的單選、多選、排序、分頁，以及編輯、導出、過濾（擴展）等等的功能。這篇文章重點給大家介紹bootstrap-table formatter 使用vue組件的方法，感興趣的朋友一起看看
2019-05-05