Advanced Search

Results 1 to 3 of 3

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

  1. #1
    Join Date
    Oct 2011
    Posts
    45
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default 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
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,702
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Add these two functions:

    Code:
    function rowindex(row){
    	var rows = table.rows, i = rows.length;
    	while(--i > -1){
    		if(rows[i] === row){return i;}
    	}
    }
    
    document.onkeydown = function(e){
    	e = e || event;
    	var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
    	if(code === 38){ //up arraow
    		newhigh = rowindex(ishigh) - 2;
    		if(!ishigh || newhigh < 0){return GoTo('mstrTable', rowslim);}
    		return GoTo('mstrTable', newhigh);
    	} else if (code === 40){ //down arrow
    		newhigh = rowindex(ishigh);
    		if(!ishigh || newhigh > rowslim){return GoTo('mstrTable', 0);}
    		return GoTo('mstrTable', newhigh);
    	}
    };
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2011
    Posts
    45
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Wow! absolutely genious John. Works like a charm. Thank you so much. Glad to have experts out there like you to help lost souls like me.

    Cheers!,

    Jay

Similar Threads

  1. Need help activating slideshow navigation with arrow keys
    By MamaGeek in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-25-2012, 03:47 PM
  2. Use Arrows keys to move to and highlight row
    By jason_kelly in forum JavaScript
    Replies: 7
    Last Post: 06-28-2012, 03:00 PM
  3. Replies: 0
    Last Post: 12-23-2010, 12:59 AM
  4. Highlight Table Columns
    By mburt in forum JavaScript
    Replies: 2
    Last Post: 07-24-2006, 02:37 PM
  5. Highlight Table Row script using CSS
    By janjan32 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-17-2005, 04:54 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •