#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    27
    Rep 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>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    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 21st, 2013 at 12:17 AM.

IMN logo majestic logo threadwatch logo seochat tools logo