Menu
Hello,
I require and am in need the help of an expert on my question below as it exceed and goes 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.
[CODE]
<!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>
<th>File Number</th>
<th>Date1</th>
<th>Date2</th>
<th>Status</th>
<th>Num.</th>
</tr>
</thead>
<tbody>
<tr>
<td>KABC</td>
<td>09/12/2002</td>
<td>09/12/2002</td>
<td>Submitted</td>
<td>1</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>WFLA</td>
<td>09/11/2002</td>
<td>09/11/2002</td>
<td>Submitted</td>
<td>3</td>
</tr>
<tr>
<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() {
var trows = document.getElementById(“mstrTable”).rows;
for (var t = 1; t < trows.length; ++t) {
trow = trows[t];
trow.className = “normal”;
trow.onclick = highlightRow;
}//end for
function highlightRow() {
for ( var t = 1; t < trows.length; ++t ) {
trow = trows[t];
if (trow != this) { trow.className = “normal” }
}//end for
this.className = (this.className == “highlighted”)?”normal”:”highlighted”;
}//end function
}//end function
)();//end script
</script>
</body>
</html>