javascript实现的使用方向键控制光标在table单元格中切换


Posted in Javascript onNovember 17, 2010

效果截图:
javascript实现的使用方向键控制光标在table单元格中切换
html 代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>选择货架号</title> 
<script type="text/javascript" src="01.js"></script> 
<style type="text/css"> 
#table1 td { 
text-align:center; 
width:15%; 
} 
#table2 td { 
text-align:center; 
width:15%; 
background-color:#dcdcdc; 
cursor:pointer; 
} 
</style> 
<body> 
<table id="table1" border="0" cellpadding="1" cellspacing="1" style="width: 100%"> 
<tr> 
<td>货架</td> 
<td>一层</td> 
<td>二层</td> 
<td>三层</td> 
<td>四层</td> 
<td>五层</td> 
</tr> 
</table> 
<table id="table2" border="0" cellpadding="1" cellspacing="1" style="width:100%;"> 
<tr> 
<td style="background-color:#ffffff;">A001</td> 
<td id="td0" title="A001-1|11" style="background-color:#6699FF;"></td> 
<td id="td1" title="A001-2|12" ></td> 
<td id="td2" title="A001-3|13" ></td> 
<td id="td3" title="A001-4|14"></td> 
<td id="td4" title="A001-5|15"></td> 
</tr> 
<tr> 
<td style="background-color:#ffffff;">A002</td> 
<td id="td5" title="A002-1|21"></td> 
<td id="td6" title="A002-2|22"></td> 
<td id="td7" title="A002-3|23"></td> 
<td id="td8" title="A002-4|24"></td> 
<td id="td9" title="A002-5|25"></td> 
</tr> 
<tr> 
<td style="background-color:#ffffff;">A003</td> 
<td id="td10" title="A003-1|31"></td> 
<td id="td11" title="A003-2|32"></td> 
<td id="td12" title="A003-3|33"></td> 
<td id="td13" title="A003-4|34"></td> 
<td id="td14" title="A003-5|35"></td> 
</tr> 
<tr> 
<td style="background-color:#ffffff;">A004</td> 
<td id="td15" title="A004-1|41"></td> 
<td id="td16" title="A004-2|42"></td> 
<td id="td17" title="A004-3|43"></td> 
<td id="td18" title="A004-4|44"></td> 
<td id="td19" title="A004-5|45"></td> 
</tr> 
<tr> 
<td style="background-color:#ffffff;">A005</td> 
<td id="td20" title="A005-1|51"></td> 
<td id="td21" title="A005-2|52"></td> 
<td id="td22" title="A005-3|53"></td> 
<td id="td23" title="A005-4|54"></td> 
<td id="td24" title="A005-5|55"></td> 
</tr> 
</table> 
</body> 
</html>

javascript 代码:
var tdnum = 0; 
var trid = "td"; 
// 键盘事件 
document.onkeydown = function(event){ 
// 兼容 Mozilla Firefox 
if (null == event) { 
event = window.event; 
} 
if (event.keyCode == 13) { 
p13key(); 
} 
else if (event.keyCode <= 40 && event.keyCode >= 37) { 
keytd(event.keyCode); 
} 
} 
// 按下回车键 
function p13key(){ 
var tdid = trid + tdnum; 
var tdtitle = document.getElementById(tdid).getAttribute("title"); 
var pos = tdtitle.indexOf("|"); 
var seatname = tdtitle.substring(0, pos); 
var seatid = tdtitle.substring(pos + 1, tdtitle.length); 
window.alert(seatname + "," + seatid); 
} 
// 变换颜色 
function setcolor(oldtd, newtd){ 
document.getElementById(oldtd).style.backgroundColor="#dcdcdc"; 
document.getElementById(newtd).style.backgroundColor="#6699FF"; 
} 
// 实现切换功能主要代码 
function keytd(key){ 
// 左 
if (key == 37) { 
--tdnum; 
if (null == document.getElementById(trid + tdnum)) { 
tdnum++; 
return; 
} 
setcolor(trid + (tdnum + 1), trid + tdnum); 
} 
// 右 
else if (key == 39) { 
++tdnum; 
if (null == document.getElementById(trid + tdnum)) { 
tdnum--; 
return; 
} 
setcolor(trid + (tdnum - 1), trid + tdnum); 
} 
// 上 
else if (key == 38) { 
tdnum = tdnum - 5; 
if (null == document.getElementById(trid + tdnum)) { 
tdnum = tdnum + 5; 
return; 
} 
setcolor(trid + (tdnum + 5), trid + tdnum); 
} 
// 下 
else if (key == 40) { 
tdnum = tdnum + 5; 
if (null == document.getElementById(trid + tdnum)) { 
tdnum = tdnum - 5; 
return; 
} 
setcolor(trid + (tdnum - 5), trid + tdnum); 
} 
}
Javascript 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
js实现3d悬浮效果
Feb 16 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
Google AJAX 搜索 API实现代码
Nov 17 #Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 #Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 #Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 #Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 #Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 #Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 #Javascript
You might like
用PHP代码在网页上生成图片
2015/07/01 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
js分页代码分享
2014/04/28 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
美国健康和保健平台:healtop
2020/07/02 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
2014年计算机专业个人自我评价
2014/01/19 职场文书
优秀民警事迹材料
2014/01/29 职场文书
个人租房协议书范本
2014/09/30 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
2016年元旦主持词
2015/07/06 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
工作报告范文
2019/06/20 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
Golang中channel的原理解读(推荐)
2021/10/16 Golang