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 相关文章推荐
瀑布流布局并自动加载实现代码
Mar 12 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
详解webpack打包vue时提取css
May 26 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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 数组教程 定义数组
2009/10/23 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
javascript定义函数的方法
2010/12/06 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
python mock测试的示例
2020/10/19 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
端午节粽子促销活动方案
2014/02/02 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书