页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容 javascript 键盘上下键

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

发布：游客字体：[增加减小] 类型：转载

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

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

点击运行可以看到效果:

<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 全选提示:你可先修改部分代码,再按运行]

第二段

点击运行可以看到效果:

<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 全选提示:你可先修改部分代码,再按运行]

Tags：javascript 键盘上下键

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：javascript键盘事件全面控制脚本代码
下一篇文章：执行iframe中的javascript方法

·在百度中搜索关于“javascript键盘上下键的操作(选择)相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

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

文章评论

同类文章

最近更新

热点排行

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

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行