最近公司開發ERP項目，要求商品入庫選擇貨架號時支援使用方向鍵快速選擇，以提高效率。
效果：
---------------------------------------------------------------------------------------------------------
01.js.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>
02.js代碼：
var num = 0;var fix = "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 id = fix + num; var title = document.getElementById(id).getAttribute("title"); var pos = title.indexOf("|"); var seatname = title.substring(0, pos); var seatid = title.substring(pos + 1, title.length); window.alert('貨架名 '+seatname + "\n貨架號 " + seatid);}// 變換顏色function setcolor(resetid, setid){ document.getElementById(resetid).style.backgroundColor="#dcdcdc"; document.getElementById(setid).style.backgroundColor="#6699FF";}// 實現切換功能主要代碼function keytd(key){// 左 if (key == 37) { num = num - 1; if (null == document.getElementById(fix + num)) { num = num + 1; return; } setcolor(fix + (num + 1), fix + num); }// 右 else if (key == 39) { num = num + 1; if (null == document.getElementById(fix + num)) { num = num -1; return; } setcolor(fix + (num - 1), fix + num); }// 上 else if (key == 38) { num = num - 5; if (null == document.getElementById(fix + num)) { num = num + 5; return; } setcolor(fix + (num + 5), fix + num); }// 下 else if (key == 40) { num = num + 5; if (null == document.getElementById(fix + num)) { num = num - 5; return; } setcolor(fix + (num - 5), fix + num); }}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
