效果截图：
html 代码：
复制代码 代码如下:
选择货架号
货架
一层
二层
三层
四层
五层
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 = 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);
}
}