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 相关文章推荐
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
微信小程序实现图片上传
May 23 Javascript
vue项目中微信登录的实现操作
Sep 08 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 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操作数组的一些函数整理介绍
2011/07/17 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
学校介绍信范文
2014/01/14 职场文书
新年晚会主持词
2014/03/24 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
入股协议书范本
2014/11/01 职场文书
入党积极分子个人总结
2015/03/02 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python