zoukankan      html  css  js  c++  java
  • 用键盘实现上下选择

      <html>
      <head>
      <title>键盘方向键控制表格</title>
      </head>
      <body onKeyDown="keyCheck();">
      <table width="80" bgcolor="#FFFFFF" height="60" border="1" bordercolor="#FFFFFF" cellpadding="0" cellspacing="0">
      <tr>
      <td id="td1" width="80">第一行</td>
      </tr>
      <tr>
      <td id="td2" width="80">第二行</td>
      </tr>
      <tr>
      <td id="td3" width="80">第三行</td>
      </tr>
      <tr>
      <td id="td4" width="80">第四行</td>
      </tr>
      <tr>
      <td id="td5" width="80">第五行</td>
      </tr>
      <tr>
      <td id="td6" width="80">第六行</td>
      </tr>
      </table>
      <script language="javascript">
      var tdIndex = 1; //获取当前行的索引变量
      document.all.td1.style.backgroundColor='#3366aa'; //设置列1的背景色
      function keyCheck() {
      if (window.event.keyCode==38) { //向上键
      for (var i=1;i<=6;i++) {
      eval("document.all.td"+i+".style.backgroundColor='#FFFFFF'");//更改所有的行背景色
      }
      if (tdIndex<=1) {
      document.all.td1.style.backgroundColor='#3366aa'; //到顶端时,只第一行颜色改变
      alert('已到顶端');
      return false;
      }
      else {
      tdIndex -= 1; //行索引减小
      eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");//改变行的背景色
      }
      }
      if (window.event.keyCode==40) { //向下键
      for (var i=1;i<=6;i++) {
      eval("document.all.td"+i+".style.backgroundColor='#FFFFFF'");//更改所有的行背景色
      }
      if (tdIndex>=6) {
      document.all.td6.style.backgroundColor='#3366aa'; //到顶端时,只第一行颜色改变
      alert('已到底端');
      return false;
      }
      else {
      tdIndex += 1; //行索引增加
      eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");//改变行的背景色
      }
      }
      }
      </script>
      </body>
      </html>
  • 相关阅读:
    如何保持mysql和redis中数据的一致性?
    秒杀系统设计&测试
    缓存穿透、缓存击穿、缓存雪崩区别和解决方案
    数据库关联子查询和非关联子查询
    mysql中 = 与in区别_浅析mysql中 exists 与 in 的区别,空判断
    mysql关键字执行顺序
    python中字典删除元素
    Python list根据下标插入/删除元素
    nginx504网关超时解决方法
    CDN加速
  • 原文地址:https://www.cnblogs.com/soofly/p/3478956.html
Copyright © 2011-2022 走看看