Want more features on Pastebin? Sign Up, it's FREE!

Untitled

By: thetenfold on Jul 24th, 2013  |  syntax: JavaScript  |  size: 3.70 KB  |  views: 203  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  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 class="header">
  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 class="normal">
  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 class="normal">
  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 class="normal">
  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 class="normal">
  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. (function () {
  64.     'use strict';
  65.  
  66.     var trows = document.querySelectorAll('#mstrTable tr:not(.header)'),
  67.         i;
  68.  
  69.     HTMLElement.prototype.getParent = function (tagname) {
  70.         var elem = this.parentNode,
  71.             parent;
  72.         tagname = tagname.toUpperCase();
  73.         while (elem && elem.tagName !== tagname) {
  74.             elem = elem.parentNode;
  75.         }
  76.         return elem;
  77.     };
  78.  
  79.     HTMLElement.prototype.previousChild = function () {
  80.         var elem = this.previousSibling;
  81.         while (elem) {
  82.             if (elem.nodeType === 1) {
  83.                 return elem;
  84.             }
  85.             elem = elem.previousSibling;
  86.         }
  87.         return null;
  88.     };
  89.  
  90.     HTMLElement.prototype.nextChild = function () {
  91.         var elem = this.nextSibling;
  92.         while (elem) {
  93.             if (elem.nodeType === 1) {
  94.                 return elem;
  95.             }
  96.             elem = elem.nextSibling;
  97.         }
  98.         return null;
  99.     };
  100.  
  101.     function reset_rows() {
  102.         var trows = document.querySelectorAll('#mstrTable tr.highlighted'),
  103.             i;
  104.         for (i = 0; i < trows.length; i += 1) {
  105.             trows[i].className = 'normal';
  106.         }
  107.     }
  108.  
  109.         function highlightRow(event) {
  110.         reset_rows();
  111.         event.target.getParent('tr').className = 'highlighted';
  112.     }
  113.  
  114.     function handleKeyPress(event) {
  115.         var selected = document.querySelector('#mstrTable tr.highlighted'),
  116.             prev, next;
  117.  
  118.         // if nothing is highlighted, highlight the first one
  119.         if (!selected) {
  120.             document.querySelectorAll('#mstrTable tr:not(.header)')[0].className = 'highlighted';
  121.             return;
  122.         }
  123.  
  124.         switch (event.keyCode) {
  125.             case 38: // up arrow
  126.                 prev = selected.previousChild();
  127.                 if (prev) {
  128.                     reset_rows();
  129.                     prev.className = 'highlighted';
  130.                 }
  131.                 break;
  132.  
  133.             case 40: // down arrow
  134.                 next = selected.nextChild();
  135.                 if (next) {
  136.                     reset_rows();
  137.                     next.className = 'highlighted';
  138.                 }
  139.                 break;
  140.  
  141.             default: break;
  142.         }
  143.     }
  144.  
  145.     for (i = 0; i < trows.length; i += 1) {
  146.                 trows[i].addEventListener('click', highlightRow, false);
  147.         }
  148.  
  149.     window.addEventListener('keypress', handleKeyPress, false);
  150. }());
  151. </script>
  152. </body>
  153. </html>
clone this paste RAW Paste Data