<!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. luogu P4314 CPU监控

    传送门 这是个远古巨坑阿qwq 没有历史最大值还是能比较好做的.可能会有一个想法,就是直接维护线段树每个结点出现过的历史最大值,每次最大值变化就更新.但是有个问题:可能一个点能影响历史最大值的标记还没 ...

  2. javascript删除cookie

    代码很简单 function deleteCookie (cookieName) { document.cookie = `${cookieName}=; expires=${new Date(0). ...

  3. Codeforces Round #545 (Div. 2)（D. Camp Schedule）

    题目链接:http://codeforces.com/contest/1138/problem/D 题目大意:给你两个字符串s1和s2(只包含0和1),对于s1中,你可以调换任意两个字符的位置.问你最 ...

  4. 域scope 介绍，及查找数据

    书中介绍<jsp:useBean> 中属性 scope:   <%@ page language="java" pageEncoding="UTF-8& ...

  5. linux 安装matlab

    转自: https://www.cnblogs.com/Amedeo/archive/2018/06/03/9129925.html 一.下载“Crack”和”ISO”文件 下载地址如下所示:http ...

  6. 如何解决错误0×80071AC3

            前几天我在机房敲百例的时候,敲完了想把文件夹移动到我的U盘里去,结果出现了这种情况           上面说运行chkdsk并重试,我运行了一下,没什么反应,我就想既然不能移动文件夹 ...

  7. 关于Mac或Linux下GO的Permission denied提示错误

    有时候当你下载第三方库的时候,编译时会提示Permission denied 权限不足, 出现这种错误因为权限不够.其中一种办法是需要把你项目目录和go的pck.bin权限放开. chmod -R 7 ...

  8. SSH命令行管理文件

    1.从服务器上下载文件 ssh root@13.111.122.133 2.从服务器上下载文件 scp username@servername:/path/filename /var/www/loca ...

  9. 【Shell】30分钟关闭Tcpdump，开启Tcpdump、检测目录大小终止任务

    场景 按照一定时间规律运行Tcpdump 思路 编程思路细化思考 查看文件个数 file_count_results=`ls -al "C:\\Users\\Windows32\\Deskt ...

  10. 817. Linked List Components

    1. 原始题目 We are given head, the head node of a linked list containing unique integer values. We are a ...