脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 方向键控制光标

javascript实现的使用方向键控制光标在table单元格中切换

 更新时间：2010年11月17日 22:05:58   作者：  
最近公司开发ERP项目，要求商品入库选择货架号时支持使用方向键快速选择，以提高入库效率。
效果截图：

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);
}
}
您可能感兴趣的文章:

相关文章

  • 详解tween.js的使用教程

    详解tween.js的使用教程

    本篇文章主要介绍了详解tween.js的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JavaScript 拾碎[三] 使用className属性

    JavaScript 拾碎[三] 使用className属性

    Javascript 还可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化。
    2010-10-10
  • javascript 文件的同步加载与异步加载实现原理

    javascript 文件的同步加载与异步加载实现原理

    本文将介绍javascript 文件的同步加载与异步加载实现原理，需要了解的朋友可以了解下
    2012-12-12
  • js实现图片漂浮效果的方法

    js实现图片漂浮效果的方法

    这篇文章主要介绍了js实现图片漂浮效果的方法,实例分析了javascript实现图片漂浮的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 微信小程序：数据存储、传值、取值详解

    微信小程序：数据存储、传值、取值详解

    这篇文章主要介绍了微信小程序：数据存储、传值、取值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JavaScript中的16进制字符介绍

    JavaScript中的16进制字符介绍

    最早接触到\unnn之类的字符是在微软的官网上。当时在网上找了一下这中字符格式，却不知道该搜什么
    2011-10-10
  • javascript实现右下角广告框效果

    javascript实现右下角广告框效果

    这篇文章主要为大家详细介绍了javascript实现右下角广告框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • TypeScript入门-接口

    TypeScript入门-接口

    在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。本文将详细介绍TypeScript接口的相关知识。
    2017-03-03
  • TypeScript接口介绍

    TypeScript接口介绍

    这篇文章主要介绍了TypeScript接口，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。下面我们一起进入文章看看TypeScript接口得具体定义吧,需要的朋友也可以参考一下
    2021-12-12
  • 纯HTML5制作围住神经猫游戏-附源码下载

    纯HTML5制作围住神经猫游戏-附源码下载

    围住神经猫游戏是一款基于html5、jquery、typescript等技术开发的游戏，非常好玩，感兴趣的朋友快来围观吧，体验一把，下面给大家分享使用html5如何制作围住神经猫游戏-附源码下载，有需要的朋友可以参考下
    2015-08-08

最新评论