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 相关文章推荐
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
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操作excel文件 基于phpexcel
2010/07/02 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
通过Python实现一个简单的html页面
2020/05/16 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
大学校庆邀请函
2014/01/11 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
卖车协议书范例
2014/09/16 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
朋友离别感言
2015/08/04 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript