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

软件发布|下载排行|最新软件

当前位置：首页 → IT学院 → IT技术 →

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

2020-05-12 我要评论

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

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

相关文章

猜您喜欢

今日热门

Copyright 2022 版权所有软件发布访问手机版

声明：所有软件和文章来自软件开发商或者作者如有异议请与本站联系联系我们