www.webdeveloper.com
Results 1 to 4 of 4

Thread: Using the Up & Down Arrow Keys to scroll through and higlight a specified row

Hybrid View

  1. #1
    Join Date
    Jun 2012
    Posts
    4

    Using the Up & Down Arrow Keys to scroll through and higlight a specified row

    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>

  2. #2
    Join Date
    Jun 2008
    Posts
    106
    The code is a little longer than I expected, but it's easy to read because of it.

    Try this out: http://pastebin.com/EYVn6EKk

  3. #3
    Join Date
    Jun 2012
    Posts
    4
    Thanks very much for this tenfold.

    I am getting an error, early in the coding: var trows = document.querySelectorAll('#mstrTable tr:not(.header)'),

    object doesn't support this property or method.

    I guess I should have mentioned that it should be IE7-10 compatible.

    Any ideas?

    Cheers,

    Jay

  4. #4
    Join Date
    Jun 2008
    Posts
    106
    Oh, I see. Try this: http://pastebin.com/zetFSLvM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles