Using the Arrow Up and Down Keys to select (highlight) a table row

jason_kelly · 01-21-2013, 07:05 PM

Hello,

I need the help of an expert on this question. My question is, how can the below javascript coding be modified, so as to allow the user to manually navigate (using the up and down arrow keys) to select and highlight a table row.

Adding this functionality for the user would be really useful.

Much thanks and appreciation for all your help and support

Cheers,

Jay.

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mstrTable {
     border: 1px solid black
}
#mstrTable td, th {
     border: 1px solid black
}

#mstrTable tr.normal td {
    color: black;
    background-color: white;
}
#mstrTable tr.highlighted td {
    color: white;
    background-color: gray;
}
</style>
</head>
<body>
  <table id="mstrTable">
     <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>0</td>

      </tr>
      <tr>
        <td>KCBS</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Approved</td>
        <td>1&nbsp;</td>
      </tr>

      <tr>
        <td>WFLA</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Submitted</td>
        <td>2</td>
      </tr>
      <tr>
        <td>WTSP</td>
        <td>09/15/2002</td>
        <td>09/15/2002</td>
        <td>In-Progress</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>

  <br>
<input type="button" name="" value="GoTo 0" onmouseup="GoTo('mstrTable',0);" />
<input type="button" name="" value="GoTo 1" onmouseup="GoTo('mstrTable',1);" />
<input type="button" name="" value="GoTo 2" onmouseup="GoTo('mstrTable',2);" />
<input type="button" name="" value="GoTo 3" onmouseup="GoTo('mstrTable',3);" />

<script type="text/javascript">

var table = document.getElementById("mstrTable");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var ishigh;

tbody.onclick = function (e) {
  e = e || window.event;
  var td = e.target || e.srcElement; //assumes there are no other elements inside the td
  var row = td.parentNode;
  if (ishigh&&ishigh!=row){
    ishigh.className='';
  }
  row.className = row.className==="highlighted" ? "" : "highlighted";
  ishigh=row;
}

thead.onclick = function (e) {
  e = e || window.event;
  var th = e.target || e.srcElement;  //assumes there are no other elements in the th
  //alert(th.innerHTML);  ### FOR LATER (DB BACK END USE) ###
}

function GoTo(id,nu){
  var obj=document.getElementById(id),
      trs=obj.getElementsByTagName('TR');
  nu = nu + 1;
  if (trs[nu]){
    if (ishigh&&ishigh!=trs[nu]){
      ishigh.className='';
    }
    trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
    ishigh=trs[nu];
   }
}
</script>

</body>
</html>