Screenshot of Effect:
HTML code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Select shelf Number </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> Shelves </td>
<td> One layer </td>
<td> Two floor </td>
<td> Three Floor </td>
<td> Four Floor </td>
<td> Five Floor </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>
JavaScript code:
Copy Code code as follows:
var tdnum = 0;
var Trid = "TD";
Keyboard events
Document.onkeydown = function (event) {
Compatible Mozilla Firefox
if (Null = event) {
event = window.event;
}
if (Event.keycode = = 13) {
P13key ();
}
else if (event.keycode <= && 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);
}
Transform color
function SetColor (OLDTD, NEWTD) {
document.getElementById (OLDTD). style.backgroundcolor= "#dcdcdc";
document.getElementById (NEWTD). style.backgroundcolor= "#6699FF";
}
Main code to implement switching function
function Keytd (key) {
Left
if (key = = 37) {
--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);
}
Under
else if (key = = 40) {
Tdnum = Tdnum + 5;
if (null = = document.getElementById (Trid + tdnum)) {
Tdnum = tdnum-5;
Return
}
SetColor (Trid + (tdnum-5), Trid + tdnum);
}
}