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

2019-11-21 01:43:46

字體：大中小

來源：轉載

供稿：網友

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

<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容錯例外處理第1/2頁

下一篇：javascript鍵盤事件全面控制腳本代碼