用键盘实现上下选择
| ? | <html> |
| ? | <head> |
| ? | <title>鍵盤方向鍵控制表格</title> |
| ? | </head> |
| ? | <body onKeyDown="keyCheck();"> |
| ? | <table width="80" bgcolor="#FFFFFF" height="60" border="1" bordercolor="#FFFFFF" cellpadding="0" cellspacing="0"> |
| ? | <tr> |
| ? | <td id="td1" width="80">第一行</td> |
| ? | </tr> |
| ? | <tr> |
| ? | <td id="td2" width="80">第二行</td> |
| ? | </tr> |
| ? | <tr> |
| ? | <td id="td3" width="80">第三行</td> |
| ? | </tr> |
| ? | <tr> |
| ? | <td id="td4" width="80">第四行</td> |
| ? | </tr> |
| ? | <tr> |
| ? | <td id="td5" width="80">第五行</td> |
| ? | </tr> |
| ? | <tr> |
| ? | <td id="td6" width="80">第六行</td> |
| ? | </tr> |
| ? | </table> |
| ? | <script language="javascript"> |
| ? | var tdIndex = 1; //獲取當(dāng)前行的索引變量 |
| ? | document.all.td1.style.backgroundColor='#3366aa'; //設(shè)置列1的背景色 |
| ? | function keyCheck() { |
| ? | if (window.event.keyCode==38) { //向上鍵 |
| ? | for (var i=1;i<=6;i++) { |
| ? | eval("document.all.td"+i+".style.backgroundColor='#FFFFFF'");//更改所有的行背景色 |
| ? | } |
| ? | if (tdIndex<=1) { |
| ? | document.all.td1.style.backgroundColor='#3366aa'; //到頂端時(shí)，只第一行顏色改變 |
| ? | alert('已到頂端'); |
| ? | return false; |
| ? | } |
| ? | else { |
| ? | tdIndex -= 1; //行索引減小 |
| ? | eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");//改變行的背景色 |
| ? | } |
| ? | } |
| ? | if (window.event.keyCode==40) { //向下鍵 |
| ? | for (var i=1;i<=6;i++) { |
| ? | eval("document.all.td"+i+".style.backgroundColor='#FFFFFF'");//更改所有的行背景色 |
| ? | } |
| ? | if (tdIndex>=6) { |
| ? | document.all.td6.style.backgroundColor='#3366aa'; //到頂端時(shí)，只第一行顏色改變 |
| ? | alert('已到底端'); |
| ? | return false; |
| ? | } |
| ? | else { |
| ? | tdIndex += 1; //行索引增加 |
| ? | eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");//改變行的背景色 |
| ? | } |
| ? | } |
| ? | } |
| ? | </script> |
| ? | </body> |
| ? | </html> |
轉(zhuǎn)載于:https://www.cnblogs.com/soofly/p/3478956.html
總結(jié)
- 上一篇： 判断一个数是不是整数
- 下一篇： phpcms毛遂