테이블 cell_javascript 기술에서 커서 전환을 제어하기 위해 화살표 키를 사용하는 Javascript 구현

효과 스크린샷: html 코드:

코드 복사 코드는 다음과 같습니다. 서가 번호 선택 >&lt ;script type="text/javascript" src="01.js"> #table1 td { 텍스트-정렬:중심; 너비:15%; } #table2 td { 텍스트-정렬:센터 배경색:# dcdcdc; 커서:포인터 } 선반 1층 2층 3층 4층 5층 A001 ; ="배경색:#ffffff;">A002 id="td6" title="A002-2|22"> > A003 td10" title="A003-1|31"> background-color:#ffffff;">A004 &lt ;td id= "td16" title="A004-2|42"> ;td id="td18" title="A004-4|44"> &lt ;/td> A005 >

자바스크립트 코드:

코드 복사

코드는 다음과 같습니다. 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 = 37) { keytd(event.keyCode) } } // Enter 키를 누르세요 function p13key(){ var tdid = trid tdnum; var tdtitle = document.getElementById(tdid).getAttribute("title") var pos = tdtitle.indexOf("|"); 🎜>var 좌석 이름 = tdtitle.substring(0, pos); var 좌석 ID = tdtitle.substring(pos 1, tdtitle.length) window.alert(seatname "," 좌석 ID); //색상 변경 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) ; } //맞습니다 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(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) } }