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 相关文章推荐
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 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中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
form自动提交实例讲解
2017/07/10 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
微信小程序自定义组件
2017/08/16 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
python删除某个目录文件夹的方法
2020/05/26 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
会计学专业学生的求职信范文
2014/01/27 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
详解Node.js如何处理ES6模块
2021/05/15 Javascript
Django+Celery实现定时任务的示例
2021/06/23 Python