Untitled

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
tr.normal td {
    color: black;
    background-color: white;
}
tr.highlighted td {
    color: white;
    background-color: red;
}
</style>
</head>
<body>
<div id="results" class="scrollingdatagrid">
  <table id="mstrTable" cellspacing="0" border="1">
     <thead>
      <tr class="header">
        <th>File Number</th>
        <th>Date1</th>
        <th>Date2</th>
        <th>Status</th>
        <th>Num.</th>
      </tr>
    </thead>
    <tbody>
      <tr class="normal">
        <td>KABC</td>
        <td>09/12/2002</td>
        <td>09/12/2002</td>
        <td>Submitted</td>
        <td>1</td>

      </tr>
      <tr class="normal">
        <td>KCBS</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Lockdown</td>
        <td>2</td>
      </tr>

      <tr class="normal">
        <td>WFLA</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Submitted</td>
        <td>3</td>
      </tr>
      <tr class="normal">
        <td>WTSP</td>
        <td>09/15/2002</td>
        <td>09/15/2002</td>
        <td>In-Progress</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>

<script type="text/javascript">
(function () {
    'use strict';

    var trows = document.querySelectorAll('#mstrTable tr:not(.header)'),
        i;

    HTMLElement.prototype.getParent = function (tagname) {
        var elem = this.parentNode,
            parent;
        tagname = tagname.toUpperCase();
        while (elem && elem.tagName !== tagname) {
            elem = elem.parentNode;
        }
        return elem;
    };

    HTMLElement.prototype.previousChild = function () {
        var elem = this.previousSibling;
        while (elem) {
            if (elem.nodeType === 1) {
                return elem;
            }
            elem = elem.previousSibling;
        }
        return null;
    };

    HTMLElement.prototype.nextChild = function () {
        var elem = this.nextSibling;
        while (elem) {
            if (elem.nodeType === 1) {
                return elem;
            }
            elem = elem.nextSibling;
        }
        return null;
    };

    function reset_rows() {
        var trows = document.querySelectorAll('#mstrTable tr.highlighted'),
            i;
        for (i = 0; i < trows.length; i += 1) {
            trows[i].className = 'normal';
        }
    }

    function highlightRow(event) {
        reset_rows();
        event.target.getParent('tr').className = 'highlighted';
    }

    function handleKeyPress(event) {
        var selected = document.querySelector('#mstrTable tr.highlighted'),
            prev, next;

        // if nothing is highlighted, highlight the first one
        if (!selected) {
            document.querySelectorAll('#mstrTable tr:not(.header)')[0].className = 'highlighted';
            return;
        }

        switch (event.keyCode) {
            case 38: // up arrow
                prev = selected.previousChild();
                if (prev) {
                    reset_rows();
                    prev.className = 'highlighted';
                }
                break;

            case 40: // down arrow
                next = selected.nextChild();
                if (next) {
                    reset_rows();
                    next.className = 'highlighted';
                }
                break;

            default: break;
        }
    }

    for (i = 0; i < trows.length; i += 1) {
        trows[i].addEventListener('click', highlightRow, false);
    }

    window.addEventListener('keypress', handleKeyPress, false);
}());
</script>
</body>
</html>