矢印キーを使用して表セル内のカーソル切り替えを制御する Javascript 実装_JavaScript スキル

効果のスクリーンショット:

html コード:

コードをコピー コードは次のとおりです:

>




;td>2階

1 フロア

3階

5階

;





="background-color:#ffffff;">A002




< td id="td12" title="A003-3|33">

背景色:#ffffff;">A004

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

A001				;
< td10" title="A003-1|31">		< /td> 🎜>
	;td id="td18" title="A004-4|44">
A005

>


JavaScript コード:




コードをコピー


コードは次のとおりです。

var tdnum = 0;
var trid = "td"
// キーボード イベント
document.onkeydown = function(event){
// Mozilla Firefox と互換性があります
if (null == イベント) {
event = window.event;
if (event.keyCode == 13) {
p13key()
; else if (event.keyCode <= 40 &&event.keyCode >= 37) {
keytd(event.keyCode);
}
}
// Enter キーを押します
関数 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 == -tdnum;
if (null == document.getElementById(trid 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
if (key == 38) 🎜> tdnum = tdnum - 5;
if (null == document.getElementById(trid tdnum)) {
tdnum = tdnum 5;
return; 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);