Chinaunix首页 | 论坛 | 博客
  • 博客访问: 304251
  • 博文数量: 111
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 707
  • 用 户 组: 普通用户
  • 注册时间: 2013-02-26 11:00
个人简介

小伙向前冲呀,小伙向前冲呀。

文章分类

全部博文(111)

文章存档

2014年(43)

2013年(68)

我的朋友

分类: JavaScript

2014-07-09 06:20:53

不错的使用键盘上下键实现选择的代码,方便用户操作。
两段使用键盘的上下键进行选择的代码: 
第一段 

  1. <Script Language="">
  2.       function document.onkeydown(){
  3.          var rowsArray = document.all('oTable').rows;
  4.          for(var i=0;i<rowsArray.length;i++){
  5.               if(rowsArray[i].children[0].style.backgroundColor=='#dcdcdc'){
  6.                  switch(window.event.keyCode){
  7.                      case 38 :
  8.                          if(i-1>=0){
  9.                            rowsArray[i-1].children[0].style.backgroundColor = '#dcdcdc';
  10.                            rowsArray[i].children[0].style.backgroundColor = '';
  11.                          }
  12.                          break;
  13.                      case 40 :
  14.                          if(i+1<=rowsArray.length-1){
  15.                             rowsArray[i+1].children[0].style.backgroundColor = '#dcdcdc';
  16.                             rowsArray[i].children[0].style.backgroundColor = '';
  17.                          }
  18.                          break;
  19.                  }
  20.                  break;
  21.               }
  22.          }
  23.       }
  24.       function document.onclick(){
  25.           if(window.event.srcElement.tagName!='TD'){ return; }
  26.           var rowsArray = document.all('oTable').rows;
  27.           for(var i=0;i<rowsArray.length;i++){
  28.                if(rowsArray[i].cells[0]==window.event.srcElement){
  29.                   rowsArray[i].cells[0].style.backgroundColor = '#dcdcdc';
  30.                }else{
  31.                   rowsArray[i].cells[0].style.backgroundColor = '';
  32.                }
  33.           }
  34.       } //( )
  35. </Script>
  36. <style> TD { cursor: hand; } </style>
  37. <table id="oTable" style="width:240px;border:1px highlight solid; font-size:12px;">
  38.      <tr>
  39.          <td style="background-color:#dcdcdc;">鼠标点击或按↑↓改变行的颜色</td>
  40.      </tr>
  41.      <tr>
  42.          <td>鼠标点击或按↑↓改变行的颜色</td>
  43.      </tr>
  44.      <tr>
  45.          <td>鼠标点击或按↑↓改变行的颜色</td>
  46.      </tr>
  47.      <tr>
  48.          <td>鼠标点击或按↑↓改变行的颜色</td>
  49.      </tr>
  50. </table>
第二段

  1. <table id="tb">
  2. <tr><td>00000000000000</td>
  3. </tr>
  4. <tr><td>11111111111111</td>
  5. </tr>
  6. <tr><td>22222222222222</td></tr>
  7. <tr><td>33333333333333</td></tr>
  8. </table>
  9. <script>
  10. var i=0;
  11. function document.onkeydown(){
  12.     if (event.keyCode == 38){
  13.         for(var k=0;k<document.getElementById('tb').rows.length;k++){
  14.             document.getElementById('tb').rows(k).bgColor="";
  15.         }
  16.         document.getElementById('tb').rows(--i%tb.rows.length).bgColor="#FF0000";
  17.         document.all.show.value=document.getElementById('tb').rows(i%tb.rows.length).innerText;
  18.     }
  19.     if (event.keyCode== 40){
  20.         for(var k=0;k<document.getElementById('tb').rows.length;k++){
  21.             document.getElementById('tb').rows(k).bgColor="";
  22.         }
  23.         document.getElementById('tb').rows(++i%document.getElementById('tb').rows.length).bgColor="#FF0000";
  24.         document.all.show.value=document.getElementById('tb').rows(i%tb.rows.length).innerText;
  25.         }
  26. }
  27. </script>
  28. <input type="text" name="show" value="do">
阅读(1444) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~