<!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. Swiper.js使用教程

    官网地址:(http://www.swiper.com.cn/). 一.Swiper.js简介: Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用 ...

  2. Coursera Deep Learning 3 Structuring Machine Learning Projects, ML Strategy

    Why ML stategy 怎么提高预测准确度?有了stategy就知道从哪些地方入手,而不至于找错方向做无用功. Satisficing and Optimizing metric 上图中,run ...

  3. Spark的四种部署方式并对应四种提交方式

    1 Local模式     本地模式  local模式 一台机器即可,开箱即用 不指定master,或者 --master  local  local[N]  local[*] local模式下,使用 ...

  4. jq的遍历关系元素方法集合

    children .children(selector) 返回被选元素的所有直接子元素,不返回文本节点: 下面例子:给level-2的子元素设置border.比较使用children和find htm ...

  5. Kotlin中,lateinit 和 lazy{} 的区别

    1.lazy{} 只能用在val类型, lateinit 只能用在var类型 如 : val name: String by lazy { "sherlbon" }lateinit ...

  6. 项目：《JavaWeb图书管理系统视频》--代码修复还可以运行起来

    1. 系统设计--项目效果图请看最后面 1技术选型 (系统架构) JSTL + JSP + Servlet + JavaBean + BeanUtils + FileUpload + JavaMail ...

  7. 再测简单的JSP---JSP和Serlet的关系

    <Java Web入门经典.pdf>中第3章 末尾:, 创建一个web动态项目SqlServerTest,创建一个JSP文件index.jsp ,启动服务器 浏览器输入  http://l ...

  8. 图像超分辨-IDN

    本文译自2018CVPR Fast and Accurate Single Image Super-Resolution via Information Distillation Network 代码 ...

  9. dubbo源码分析3——SPI机制中的ExtensionLoader类的objectFactory属性分析

    ExtensionLoader类是整个SPI的核心类,每个SPI都会对应一个ExtensionLoader类实例,这个类的构造方法如下: private ExtensionLoader(Class&l ...

  10. 使用 Charles 抓取 App 网络请求

    最近开发App的时候需要用到大量其他应用的数据,但接口不公开,所以想到了抓取.差不多要读到5W的用户数据,采用的是找到数据接口,然后不停发请求的方式.用到的抓取工具是Charles,本文讲解的应用是W ...