<!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>