By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,985 Members | 1,863 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,985 IT Pros & Developers. It's quick & easy.

Using the up and down arrow keys to select a table row

P: 2
Hi Guruís

I need the help of an expert from this forum on my question below as it is well beyond the level of knowledge that I have for programming in JavaScript.

Given the existing JavaScript coding below, how can I piggy back and add onto the existing coding so as to add functionality for a user to use their up and down arrow keys to scroll through the table, while they are scrolling through (btw the header column exempt) it would highlight the selected row and change its row color.

A point to note that if an existing table row is selected, and I hit my up or down arrow key, it would just move to and highlight the previous and next row. Some logic here is that I am guessing that one would need to find the row index to do this. Like I said, it is well beyond what I know how to do.

Much thanks and a huge appreciation for all your help.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. tr.normal td {
  6.     color: black;
  7.     background-color: white;
  8. }
  9. tr.highlighted td {
  10.     color: white;
  11.     background-color: red;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div id="results" class="scrollingdatagrid">
  17.   <table id="mstrTable" cellspacing="0" border="1">
  18.      <thead>
  19.       <tr> 
  20.         <th>File Number</th>
  21.         <th>Date1</th>
  22.         <th>Date2</th>
  23.         <th>Status</th>
  24.         <th>Num.</th>
  25.       </tr>
  26.     </thead>
  27.     <tbody>
  28.       <tr> 
  29.         <td>KABC</td>
  30.         <td>09/12/2002</td>
  31.         <td>09/12/2002</td>
  32.         <td>Submitted</td>
  33.         <td>1</td>
  34.  
  35.       </tr>
  36.       <tr> 
  37.         <td>KCBS</td>
  38.         <td>09/11/2002</td>
  39.         <td>09/11/2002</td>
  40.         <td>Lockdown</td>
  41.         <td>2</td>
  42.       </tr>
  43.  
  44.       <tr> 
  45.         <td>WFLA</td>
  46.         <td>09/11/2002</td>
  47.         <td>09/11/2002</td>
  48.         <td>Submitted</td>
  49.         <td>3</td>
  50.       </tr>
  51.       <tr> 
  52.         <td>WTSP</td>
  53.         <td>09/15/2002</td>
  54.         <td>09/15/2002</td>
  55.         <td>In-Progress</td>
  56.         <td>4</td>
  57.       </tr>
  58.     </tbody>
  59.   </table>
  60. </div>
  61.  
  62. <script type="text/javascript">
  63. (
  64. function() {
  65. var trows = document.getElementById("mstrTable").rows;
  66.  
  67.     for (var t = 1; t < trows.length; ++t) {
  68.         trow = trows[t];
  69.         trow.className = "normal";
  70.         trow.onclick = highlightRow;
  71.     }//end for
  72.  
  73.     function highlightRow() {
  74.         for ( var t = 1; t < trows.length; ++t ) {
  75.             trow = trows[t];
  76.             if (trow != this) { trow.className = "normal" }
  77.         }//end for
  78.  
  79.         this.className = (this.className == "highlighted")?"normal":"highlighted";
  80.       }//end function
  81.  
  82.  
  83.  
  84.   }//end function
  85.  
  86. )();//end script
  87. </script>
  88. </body>
  89. </html>
  90.  
Jul 25 '13 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.