這篇文章主要介紹了javascript上下方向鍵控制表格行選中並高亮顯示的方法,涉及javascript針對鍵盤按鍵操作相應的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了javascript上下方向鍵控制表格行選中並高亮顯示的方法。分享給大家供大家參考。具體實現方法如下：
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 <style> tr.highlight { background:#08246B; color:white; } </style> <table border="1" width="70%" id="ice"> <tr onClick="selectTR();return false;"> <td>123</td> <td>234</td> <td>abc</td> <td>def</td> </tr> <tr onClick="selectTR();"> <td>123</td> <td>234</td> <td>abc</td> <td>def</td> </tr> <tr onClick="selectTR();"> <td>123</td> <td>234</td> <td>abc</td> <td>def</td> </tr> <tr onClick="selectTR();"> <td>123</td> <td>234</td> <td>abc</td> <td>def</td> </tr> <tr onClick="selectTR();"> <td>123</td> <td>234</td> <td>abc</td> <td>def</td> </tr> </table> <script language="javascript"> <!-- var currentLine = -1; document.onkeydown = function(e) { e = window.event || e; switch(e.keyCode) { case 38: currentLine--; changeItem(); break; case 40: currentLine++; changeItem(); break; default: break; } } function selectTR() { currentLine=window.event.srcElement.parentElement.rowIndex; //alert(currentLine); changeItem(); } //改變選擇項目 function changeItem() { if(document.all) var it = document.getElementById("ice").children[0]; else var it = document.getElementById("ice"); for(i=0;i<it.rows.length;i++) { it.rows[i].className = ""; } if(currentLine < 0) currentLine = it.rows.length - 1; if(currentLine == it.rows.length) currentLine = 0; it.rows[currentLine].className = "highlight"; } //--> </script>希望本文所述對大家的javascript程序設計有所幫助。