Javascript up/down arrow keys control how to select and highlight table rows

Javascript up/down arrow keys control how to select and highlight table rows

This article mainly introduces how to control the selection and highlight of table rows by using the up and down arrow keys of javascript. It involves some tips for using javascript to operate on keyboard keys and has some reference value. For more information, see

 

 

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:

?

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: # 01_6b; 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 selected project 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.