JavaScript利用键盘方向键（上下键）控制表格行选中
<!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&¤tLine>-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利用键盘方向键（上下键）控制表格行选中的更多相关文章
- AppBoxPro - 细粒度通用权限管理框架（可控制表格行内按钮）源码提供下载
特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以运行起来(默认使用VS自带的LocalDB数据库). FineUIPro是 ...
- jQuery学习笔记(6)--复选框控制表格行高亮
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- jQuery控制表格行移动，序号不变
@model Gd.NetSign.Controllers.DTO.SysPamaterDTO @{ ViewBag.Title = "SysPamatList"; //Layou ...
- 在Bootstrap开发框架中使用dataTable直接录入表格行数据
在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...
- Javascript 检测键盘按键
Javascript中 有3个事件句柄在对应键盘的输入状态:keydown.keypress和keyup. 分别对应的意思是:按键被按下(按下按键但还没有抬起).点击按键(按下并抬起按键).按键抬起( ...
- JavaScript获取键盘事件
JavaScript中: onkeydown 事件会在用户按下一个键盘按键时发生. onkeypress 事件会在键盘按键被按下并释放一个键时发生. onkeyup 事件会在键盘按键被松开时发生. 支 ...
- javascript之键盘事件
键盘事件包含onkeydown.onkeypress和onkeyup这三个事件 事件初始化 function keyDown(){} document.onkeydown = keyDown; ...
- javascript的键盘事件大全
javascript的键盘事件大全 ------------------------------------------------------------------- 使用event对象的keyC ...
- C#基础知识之键盘对应的键值
1.一般的按键禁用 一般的按键禁用只要找出相应的keycode禁用即可.例如:window.event.keyCode==13 //Enter键 其他可以对照一下的keyCode进行选择. 字母和数字 ...
随机推荐
- a*寻路分析
http://dev.gameres.com/Program/Abstract/Arithmetic/A%20Pathfinding%20for%20Beginners.htm 定义: 绿色节点为A ...
- TensorFlow从入门到理解（六）：可视化梯度下降
运行代码: import tensorflow as tf import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.m ...
- python之字符串常用的方法
1. 去掉空格或换行符 s='. hello .world .\n' new_s = s.strip()#默认去掉字符串前后的空格和换行符 new_s = s.strip('.')#可传参去掉字符串前 ...
- mfc调用WPFDLL
1.修改MFC项目属性支持CLR 2.打开vcxproj,修改<PropertyGroup Label="Globals"> <PropertyGroup Lab ...
- 经典视觉SLAM框架
经典视觉SLAM框架 整个视觉SLAM流程包括以下步骤: 1. 传感器信息读取.在视觉SLAM中主要为相机图像信息的读取和预处理. 2. 视觉里程计(Visual Odometry,VO).视觉里程计 ...
- java 八种基本数据类型
- java知识点2
进阶篇 Java底层知识 字节码.class文件格式 CPU缓存,L1,L2,L3和伪共享 尾递归 位运算 用位运算实现加.减.乘.除.取余 设计模式 了解23种设计模式 会使用常用设计模式 单例.策 ...
- css利用padding百分比实现图片自适应高度
应用场景 宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题 重点:CSS百分比padding都是相对宽度计算的 <div class=" ...
- c++学习day4
1.结构(struct) struct name{ int num; name *next; } 1)所占内存空间即结构中所有成员的变量大小之和 2)定义指向结构变量的指针比如 name *a; na ...
- Mac下更改JDK环境变量配置
1.打开终端 2.如果你是第一次配置环境变量,可以使用“touch .bash_profile” 创建一个.bash_profile的隐藏配置文件(如果你是为编辑已存在的配置文件,则使用"o ...