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

Dev Shed Forums Sponsor:

January 20th, 2013, 10:09 PM

Jason_Kelly

Registered User

Join Date: Nov 2012

Posts: 23

Time spent in forums: 2 h 20 m 59 sec
Reputation Power: 0

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

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>

January 20th, 2013, 11:07 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 605

Time spent in forums: 1 Week 1 Day 16 h 30 m 44 sec
Reputation Power: 69

Here is a basic example; that I adapted from here:

Code:

function upArrowPressed() {
   alert("You Pressed The Up Arrow!");
}

function downArrowPressed() {
   alert("You Pressed The Down Arrow!");
}

document.onkeydown = function(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 38:
            upArrowPressed();
            break;
        case 40:
            downArrowPressed();
            break;
    }
};

I will you left you try to put it together from there. If you do an online search, it can save you some time, with things like: DOM event attachments and other basic JavaScript questions, relating to the three past similar questions; that you have posted. That's just a friendly tip to keep in mind.

Last edited by web_loone08 : January 20th, 2013 at 11:17 PM.

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

Developer Shed Advertisers and Affiliates