Javascript implementation of using arrow keys to control the cursor switching in table cells_javascript skills

Effect screenshot:

html code:

Copy code The code is as follows:

< ;script type="text/javascript" src="01.js">






< ;td>Second floor

shelf

one floor

Three floors

Fourth floor

Fifth floor

< td id="td10" title="A003-1|31">





< td style="background-color:#ffffff;">A004

< ;td id="td16" title="A004-2|42">

A001
A002
A003			< /td>
			< ;/td>
A005

javascript code:

Copy code The code is as follows :

var tdnum = 0;
var trid = "td";
// Keyboard event
document.onkeydown = function(event){
// Compatible with Mozilla Firefox
if (null == event) {
event = window.event;
}
if (event.keyCode == 13) {
p13key();
}
else if (event.keyCode <= 40 && event.keyCode >= 37) {
keytd(event.keyCode);
}
}
// Press the Enter key
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);
}
//Change color
function setcolor(oldtd, newtd){
document.getElementById(oldtd).style.backgroundColor="#dcdcdc";
document.getElementById(newtd).style.backgroundColor == -tdnum;
if (null == document.getElementById(trid tdnum)) {
tdnum ;
return;
}
setcolor(trid (tdnum 1), trid tdnum);
}
//right
else if (key == 39) {
tdnum;
if (null == document.getElementById(trid tdnum)) {
tdnum--;
return;
}
setcolor(trid (tdnum - 1), trid tdnum);
}
// on
else if (key == 38) {
tdnum = tdnum - 5;
if (null == document.getElementById(trid tdnum)) {
tdnum = tdnum 5;
return;
}
setcolor(trid (tdnum 5) , trid tdnum);
}
// Next
else if (key == 40) {
tdnum = tdnum 5;
if (null == document.getElementById(trid tdnum) ) {
tdnum = tdnum - 5;
return;
}
setcolor(trid (tdnum - 5), trid tdnum);
}
}