JavaScript up and DOWN ARROW keys control how table rows are selected and highlighted _javascript tips

The example in this article describes the way the JavaScript up and DOWN ARROW keys control the table row selection and highlighting. Share to everyone for your reference. The implementation method is as follows:

<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&
 Gt <tr onclick= "selecttr ();" > <td>123</td> <td>234</td> <td>abc</td> <td>def</td> </tr&
 Gt <tr onclick= "selecttr ();" > <td>123</td> <td>234</td> <td>abc</td> <td>def</td> </tr&
 Gt <tr onclick= "selecttr ();" > <td>123</td> <td>234</td> <td>abc</td> <td>def</td> </tr&
 Gt <tr onclick= "selecttr ();" > <td>123</td> <td>234</td> <td>abc</td> <td>def</td> </tr&
Gt </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 Select Item 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>

The

wants this article to help you with your JavaScript programming.