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

效果截图：

html 代码：

选择货架号

#table1 td {

text-align:center;

width:15%;

}

#table2 td {

text-align:center;

width:15%;

background-color:#dcdcdc;

cursor:pointer;

}

货架

一层

二层

三层

四层

五层

A001
A002
A003
A004
A005

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);

}

}