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

Untitled

By: thetenfold on Jul 25th, 2013  |  syntax: JavaScript  |  size: 4.54 KB  |  views: 179  |  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, i;
  67.  
  68.     HTMLCollection.prototype.filter_out = Array.prototype.filter_out = function (cl) {
  69.         var coll = this,
  70.             arr = [], i, c;
  71.         for (i = 0; i < coll.length; i += 1) {
  72.             c = coll[i];
  73.             if (c.className.indexOf(cl) === -1) {
  74.                 arr.push(c);
  75.             }
  76.         }
  77.         return arr;
  78.     };
  79.  
  80.     HTMLCollection.prototype.normalize = function () {
  81.         var coll = this,
  82.             arr = [], i;
  83.         if (coll instanceof Array) {
  84.             return coll;
  85.         }
  86.         for (i = 0; i < coll.length; i += 1) {
  87.             arr.push( coll[i] );
  88.         }
  89.         return arr.length === 1 ? arr[0] : (arr.length === 0 ? null : arr);
  90.     };
  91.  
  92.     HTMLElement.prototype.getParent = function (tagname) {
  93.         var elem = this.parentNode,
  94.             parent;
  95.         tagname = tagname.toUpperCase();
  96.         while (elem && elem.tagName !== tagname) {
  97.             elem = elem.parentNode;
  98.         }
  99.         return elem;
  100.     };
  101.  
  102.     HTMLElement.prototype.previousChild = function () {
  103.         var elem = this.previousSibling;
  104.         while (elem) {
  105.             if (elem.nodeType === 1) {
  106.                 return elem;
  107.             }
  108.             elem = elem.previousSibling;
  109.         }
  110.         return null;
  111.     };
  112.  
  113.     HTMLElement.prototype.nextChild = function () {
  114.         var elem = this.nextSibling;
  115.         while (elem) {
  116.             if (elem.nodeType === 1) {
  117.                 return elem;
  118.             }
  119.             elem = elem.nextSibling;
  120.         }
  121.         return null;
  122.     };
  123.  
  124.     function reset_rows() {
  125.         var trows = document.getElementById('mstrTable').getElementsByTagName('tr').filter_out('normal'),
  126.             i;
  127.         for (i = 0; i < trows.length; i += 1) {
  128.             trows[i].className = 'normal';
  129.         }
  130.     }
  131.  
  132.         function highlightRow(event) {
  133.         reset_rows();
  134.         event.target.getParent('tr').className = 'highlighted';
  135.     }
  136.  
  137.     function handleKeyPress(event) {
  138.         var selected = document.getElementById('mstrTable').getElementsByTagName('tr').filter_out('normal').filter_out('header')[0],
  139.             prev, next;
  140.         // if nothing is highlighted, highlight the first one
  141.         if (!selected) {
  142.             document.getElementById('mstrTable').getElementsByTagName('tr').filter_out('header')[0].className = 'highlighted';
  143.             return;
  144.         }
  145.  
  146.         switch (event.keyCode) {
  147.             case 38: // up arrow
  148.                 prev = selected.previousChild();
  149.                 if (prev) {
  150.                     reset_rows();
  151.                     prev.className = 'highlighted';
  152.                 }
  153.                 break;
  154.  
  155.             case 40: // down arrow
  156.                 next = selected.nextChild();
  157.                 if (next) {
  158.                     reset_rows();
  159.                     next.className = 'highlighted';
  160.                 }
  161.                 break;
  162.  
  163.             default: break;
  164.         }
  165.     }
  166.  
  167.     trows = document.getElementById('mstrTable').getElementsByTagName('tr').filter_out('header');
  168.     for (i = 0; i < trows.length; i += 1) {
  169.                 trows[i].addEventListener('click', highlightRow, false);
  170.         }
  171.  
  172.     window.addEventListener('keypress', handleKeyPress, false);
  173. }());
  174. </script>
  175. </body>
  176. </html>
clone this paste RAW Paste Data