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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
javascript Number 与 Math对象的介绍
Nov 17 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
javascript不可用的问题探究
2013/10/01 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
Javascript模拟实现new原理解析
2020/03/03 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
Python打印斐波拉契数列实例
2015/07/07 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
flask中的wtforms使用方法
2018/07/21 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
就业推荐表自我鉴定范文
2014/03/21 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
试了下Golang实现try catch的方法
2021/07/01 Golang
box-shadow单边阴影的实现
2023/05/21 HTML / CSS