<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .buddyListOdd{
            background-color:#f0f0f0;
        }
        .buddyListEven{
            background-color:#ffffff;
        }
        .buddyListHighLight{
            background-color:#DCE2E8;
        }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
        var currentLine=-1, offsetTr = 0;
        var $=function(id){
          return document.getElementById(id);
        }
        function keyDownEvent(e){
            var e = window.event||e;
            if(e.keyCode==38){
                offsetTr = 0;
                currentLine--;
                changeItem();
            }else if(e.keyCode==40){
                offsetTr = 150;
                currentLine++;
                changeItem();
            }else if(e.keyCode==13&&currentLine>-1){
                addUser();
            }
            return false;
        }
        function changeItem(){
            if(!$('buddyListTable')) return false;
            var it = $('buddyListTable');
            if(document.all){
                it = $('buddyListTable').children[0];
            }
            changeBackground();
            if(currentLine<0) currentLine = it.rows.length-1;
            if(currentLine >= it.rows.length) currentLine = 0;
            it.rows[currentLine].className = "buddyListHighLight";
            if($('allBuddy')){
                $('allBuddy').scrollTop = it.rows[currentLine].offsetTop-offsetTr;
            }
        }
        function changeBackground(){
            var it = $('buddyListTable');
            if(document.all){
                it = $('buddyListTable').children[0];
            }
            for(var i=0; i<it.rows.length; i++){
                if(i%2==0){
                    it.rows[i].className = "buddyListOdd";
                }else{
                    it.rows[i].className = "buddyListEven";
                }
            }
        }

function addUser(){
            var it = $('buddyListTable');
            if(document.all){
                it = $('buddyListTable').children[0];
            }
            var trBody = it.rows[currentLine].innerHTML;
            $('result').innerHTML = $('result').innerHTML+trBody;
        }
    </SCRIPT>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%" id="buddyListTable"><tbody>
   <tr class="buddyListOdd" onkeyup="return keyDownEvent(event);">
    <td width="26px"><input type="checkbox"></td>
    <td align="left" valign="middle">AAAAAA</td>
    <td align="left">+861311111111</td>
   </tr>
   <tr class="buddyListEven">
       <td width="26px"><input type="checkbox"></td>
       <td align="left" valign="middle">BBBBBB</td>
       <td align="left">+861322222222</td>
    </tr>
   <tr class="buddyListOdd">
       <td width="26px"><input type="checkbox"></td>
       <td align="left" valign="middle">CCCCCC</td>
       <td align="left">+861333333333</td>
   </tr>
   <tr class="buddyListEven">
       <td width="26px"><input type="checkbox"></td>
       <td align="left" valign="middle">DDDDDD</td>
       <td align="left">+861333333333</td>
    </tr>
   <tr class="buddyListEven">
       <td width="26px"><input type="checkbox"></td>
       <td align="left" valign="middle">DDDDDD</td>
       <td align="left">+861344444444</td>
   </tr>
   <tr class="buddyListOdd">
       <td width="26px"><input type="checkbox"></td>
       <td align="left" valign="middle">EEEEEE</td>
       <td align="left">+861355555555</td>
   </tr>
   <tr class="buddyListEven">
       <td width="26px"><input type="checkbox"></td>
       <td align="left" valign="middle">FFFFFF</td>
       <td align="left">+861366666666</td>
   </tr>
   <tr class="buddyListOdd">
       <td width="26px"><input type="checkbox"></td>
       <td align="left" valign="middle">GGGGGG</td>
       <td align="left">+861366666666</td>
   </tr>
   <tr class="buddyListEven">
       <td width="26px"><input type="checkbox"></td>
       <td align="left" valign="middle">HHHHHH</td>
       <td align="left">+861377777777</td>
   </tr>
   <tr class="buddyListOdd">
       <td width="26px"><input type="checkbox"></td>
       <td align="left" valign="middle">IIIIII</td>
       <td align="left">+861388888888</td>
   </tr>
   <tr class="buddyListEven">
       <td width="26px"><input type="checkbox"></td>
       <td align="left" valign="middle">JJJJJJ</td>
       <td align="left">+861399999999</td>
   </tr>
   <tr class="buddyListOdd">
       <td width="26px"><input type="checkbox"></td>
       <td align="left" valign="middle">KKKKKK</td>
       <td align="left">+861321111111</td>
   </tr>
   <tr class="buddyListEven">
       <td width="26px"><input type="checkbox"></td>
       <td align="left" valign="middle">LLLLLL</td>
       <td align="left">+861322222222</td>
   </tr>
   <tr class="buddyListOdd">
       <td width="26px"><input type="checkbox"></td>
       <td align="left" valign="middle">MMMMMM</td>
       <td align="left">+861323333333</td>
   </tr>
   <tr class="buddyListEven">
       <td width="26px"><input type="checkbox"></td>
       <td align="left" valign="middle">NNNNNN</td>
       <td align="left">+861324444444</td>
   </tr>
    </tbody>
</table>
<div>
    首先把鼠标焦点放入下面的输入框，然后按键盘的上下键，可以看到表格中的行被高亮选中<br />
    <input type="text" onkeyup="return keyDownEvent(event);"/><br />
    按回车后，相对应的表格项会出现在下面，当然这只是一个简单的Demo，复杂的操作开发者可以自己添加<br />
    <table id="result"></table>
</div>
</body>
</html>

JavaScript利用键盘方向键（上下键）控制表格行选中的更多相关文章

  1. AppBoxPro - 细粒度通用权限管理框架（可控制表格行内按钮）源码提供下载

    特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以运行起来(默认使用VS自带的LocalDB数据库). FineUIPro是 ...

  2. jQuery学习笔记(6)--复选框控制表格行高亮

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  3. jQuery控制表格行移动，序号不变

    @model Gd.NetSign.Controllers.DTO.SysPamaterDTO @{ ViewBag.Title = "SysPamatList"; //Layou ...

  4. 在Bootstrap开发框架中使用dataTable直接录入表格行数据

    在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...

  5. Javascript 检测键盘按键

    Javascript中 有3个事件句柄在对应键盘的输入状态:keydown.keypress和keyup. 分别对应的意思是:按键被按下(按下按键但还没有抬起).点击按键(按下并抬起按键).按键抬起( ...

  6. JavaScript获取键盘事件

    JavaScript中: onkeydown 事件会在用户按下一个键盘按键时发生. onkeypress 事件会在键盘按键被按下并释放一个键时发生. onkeyup 事件会在键盘按键被松开时发生. 支 ...

  7. javascript之键盘事件

     键盘事件包含onkeydown.onkeypress和onkeyup这三个事件 事件初始化 function keyDown(){} document.onkeydown = keyDown; ...

  8. javascript的键盘事件大全

    javascript的键盘事件大全 ------------------------------------------------------------------- 使用event对象的keyC ...

  9. C#基础知识之键盘对应的键值

    1.一般的按键禁用 一般的按键禁用只要找出相应的keycode禁用即可.例如:window.event.keyCode==13 //Enter键 其他可以对照一下的keyCode进行选择. 字母和数字 ...

随机推荐

  1. c语言 贪食蛇小游戏

    ---恢复内容开始--- #include <stdio.h>#include <windows.h>#include <stdlib.h>#include < ...

  2. Java基础_0206：方法的定义与使用

    方法的基本概念 方法的主要功能是封装可以执行的一段代码,这样不仅可以进行重复调用,更可以方便的实现代码的维护,而本次使用的方法定义语法如下所示. public static 返回值类型 方法名称(参数 ...

  3. Git——如何将本地项目提交至远程仓库

    参考文章:http://blog.csdn.net/dadaxiongdebaobao/article/details/52081826   git 将一个本地文件目录提交到远程仓库的步骤 参考文章: ...

  4. 如何预览Github上的页面

    参考链接:https://www.jianshu.com/p/46ddd926f005

  5. 20165237 2017-2018-2 《Java程序设计》第6周学习总结

    20165237 2017-2018-2 <Java程序设计>第6周学习总结 教材学习内容总结 1.String类的常用方法: public int length() public boo ...

  6. python,类和对象（一）

    万物皆对象,在python中也存在对象,首先我们需要知道面向对象的三大特征封装.继承.多态. 封装就是将一种或多种杂乱无序的代码进行有序的分类封装. 继承可以理解为孩子会继承父亲所有的东西. 多态可以 ...

  7. Python学习-环境搭建(IronPython)

    一.IDE环境 VS2013  下安装 PTVS 2.2.2 VS 2013 VS2015 已经集成了Python的开发环境 二.安装 IronPython 下载地址:http://ironpytho ...

  8. Python os.walk文件遍历用法【转】

    python中os.walk是一个简单易用的文件.目录遍历器,可以帮助我们高效的处理文件.目录方面的事情. 1.载入 要使用os.walk,首先要载入该函数 可以使用以下两种方法 import os ...

  9. 设计模式C++学习笔记之十五（Composite组合模式）

      15.1.解释 概念:将对象组合成树形结构以表示“部分-整体”的层次结构.Composite使得用户对单个对象和组合的使用具有一致性. main(),客户 CCorpNode,抽象基类,实现基本信 ...

  10. Day7--------------虚拟机网络服务

    1.桥接 连接到本地的网卡,把本机的网卡看作是虚拟交换机 ping ip地址 arping -i eth0 192.168.11.11 返回物理MAC地址             #可以检查是否有重复 ...