<!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. 基础必备Linux操作

    求助 1. --help 指令的基本用法与选项介绍. 2. man man 是 manual 的缩写,将指令的具体信息显示出来. 3. info info 与 man 类似,但是 info 将文档分成 ...

  2. python 小数据池,is and "==",decode ,encode

    一:小数据池 1.python运行中的缓存: 2.目的:缓存我们字符串,整数,布尔值.在使用的时候不需要创建过多的对象 3.python 缓存数据:缓存:int, str, bool.         ...

  3. git修改历史记录

     1.git stash2.git rebase 45c2d5c --interactive 3.git stash pop4.git add5.git commit --amend      确认编 ...

  4. NPOI2.2.0.0实例详解(九)—设置EXCEL单元格【时间格式】

    原文:http://blog.csdn.net/xxs77ch/article/details/50245391 using System; using System.Collections.Gene ...

  5. 遗传算法selection总结-[Fitness, Tournament, Rank Selection]

    假设个体(individual)用\(h_i\)表示,该个体的适应度(fitness)为\(Fitness(h_i)\),被选择的概率为\(P(h_i)\). 另外假设种群(population)的个 ...

  6. Configuring Automatic Restart of an Oracle Database

    https://docs.oracle.com/cd/E11882_01/server.112/e25494/restart.htm#ADMIN12708

  7. CF1108F MST Unification

    题目地址:CF1108F MST Unification 最小生成树kruskal算法的应用 只需要在算法上改一点点 当扫描到权值为 \(val\) 的边时,我们将所有权值为 \(val\) 的边分为 ...

  8. NOIP2018D1T1 铺设道路

    原题:NOIP2013D1T1 积木大赛 题目地址:P5019 铺设道路 思路:玄学瞎搞 将每块区域插入一个小根堆,这里的小根堆用优先队列实现,即运用一个 \(pair\) , \(first\) 为 ...

  9. 【转】python模块分析之typing（三）

    [转]python模块分析之typing(三) 前言:很多人在写完代码一段时间后回过头看代码,很可能忘记了自己写的函数需要传什么参数,返回什么类型的结果,就不得不去阅读代码的具体内容,降低了阅读的速度 ...

  10. ES6的Promise浅析

    Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大. 它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 Promise 对象. P ...