The up and down arrow keys in javascript control the method of selecting and highlighting table rows.
This example describes how to select and highlight a table row using the up/down arrow key of javascript. Share it with you for your reference. The specific implementation method is as follows:
<Style> tr. highlight {background: # 000006b; 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 () ;}// change the 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>
I hope this article will help you design javascript programs.