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

    Join Date
    Nov 2012
    Posts
    27
    Rep Power
    0

    Using the up and down arrow keys to select a table row


    Hi Guruís

    I need the help of an expert from this forum on my question below as it is 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
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,117
    Rep Power
    119
    Originally Posted by Jason_Kelly
    I need the help of an expert from this forum on my question below as it is 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.
    Do some online research about "JavaScript keyCodes" and once you've figured out how to harness the keyCodes for the up/down keypess event(s); you can add them to an if/else condition, to highlight each of your table rows.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    192
    Rep Power
    31
    Something with a bit different approach?
    Well, not friendly enough maybe on older browsers, because of tabIndex attribute added to each <tr> elements:
    PHP Code:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    style type="text/css">
        
    tbody tr:focus{
            
    colorwhite;
            
    background-colorred;
        }
    </
    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 tabIndex="100">
            <
    td>KABC</td>
            <
    td>09/12/2002</td>
            <
    td>09/12/2002</td>
            <
    td>Submitted</td>
            <
    td>1</td>

          </
    tr>
          <
    tr tabIndex="100"
            <
    td>KCBS</td>
            <
    td>09/11/2002</td>
            <
    td>09/11/2002</td>
            <
    td>Lockdown</td>
            <
    td>2</td>
          </
    tr>
          <
    tr tabIndex="100"
            <
    td>WFLA</td>
            <
    td>09/11/2002</td>
            <
    td>09/11/2002</td>
            <
    td>Submitted</td>
            <
    td>3</td>
          </
    tr>
          <
    tr tabIndex="100"
            <
    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 
    1trows.length; ++t) {
                
    trow trows[t];
                
    trow.onkeyup = function(ev){
                    
    evCompat ev ev window.event//for IE.8
                    
    switch (evCompat.keyCode){
                    
                        case 
    38//if keyed up, search current row first. 
                            
    var index;
                            
    //if current row is found and is not the 1st row, exchange.
                            
    for( index 2index trows.lengthindex++ )
                                if(
    this == trows[index] ){ 
                                    
    this.parentNode.insertBeforethistrowsindex ] );
                                    
    this.focus();
                                    break;
                                }
                            break;
                            
                        case 
    40//if key down, search current row first.
                            
    var index;
                            
    //if current row is found and is not the last row, exchange.
                            
    for( index 1index trows.length 1index++ )
                                if( 
    this == trows[index] ){ 
                                    if (
    trowsindex ]) 
                                        
    this.parentNode.insertBeforethistrowsindex ] );
                                    else
                                        
    this.parentNode.insertBeforethisnull );
                                    
    this.focus();
                                    break;
                                }
                    }
                };
            }
    //end for

        
    }//end function
      
    )();//end script
    </script>

    </body> 
    Last edited by hdewantara; July 25th, 2013 at 08:30 AM.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    27
    Rep Power
    0
    Interesting way of doing things.

    Thanks so much hdewantara!

    Cheers,

    Jay

IMN logo majestic logo threadwatch logo seochat tools logo