www.webdeveloper.com
Results 1 to 3 of 3

Thread: Use Arrows keys to move to and highlight row

  1. #1
    Join Date
    Jun 2012
    Posts
    4

    Use Arrows keys to move to and highlight row

    Hello,

    I need your help,

    The code below is used to highlight the selected row (when clicked) from the grid table. However, i'd like to add functionality such that when the focus is on the table and I use both the arrow up and down keys it will also move to and highlight the row. I am still a newbie to this all and have had previous help with the existing coding.

    Due to the restriction of the maximum amount characters allowed, I have moved it over to paste bucket: http://www.pastebucket.com/2481

    Thanks for all your help, I am direly frustrated.

    Jay.

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    Try to attach an event onkeydown (onkeypress or onkeyup could be possible with variants to read the key) on the document with something like this
    Code:
    if(document.addEventListener) {
    		for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
    		document.addEventListener("keyup", changeRow, false);
    		}
    	else {for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
    		document.attachEvent("onkeyup", changeRow);}
    Then store the highlighted row in a global variable and update it value in the function changeColor
    Code:
    var highlightedRow = null;
    function changeColor(e) {
    	if(!e) e = window.event;
    	var o = e.target? e.target: e.srcElement;
    	while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
    	for(var i=0; i<n; ++i) {
    		rows[i].style.backgroundColor = bgcs[i];
    		if(rows[i]==o) {
    		highlightedRow = i;
    		rows[i].style.backgroundColor = color;
    		}//end of if
    	}//end of for
    }//end of function
    Finally, build a changeRow function (a copy of changeColor with some variants to place before the events attachements)
    Code:
    function changeRow(e) {
    	//  No selected line   
    	if (highlightedRow < 0) return;
    	if(!e) e = window.event;
     	var key = e.which ? e.which : e.keyCode;
    	// 38 and 40 are the key codes for Arrow up and down
     	if (key!="38" && key!="40") return;
     	alert(" Row : "+highlightedRow+"  Good key :"+key+" !")
    /*	
    	for(var i=0; i<n; ++i) {
    		rows[i].style.backgroundColor = bgcs[i];
    		if(rows[i]==o) {
    		rows[i].style.backgroundColor = color;
    		}//end of if
    	}//end of for
    */	
    }//end of function
    It does not more remain than to make some tests on lines to achieve...
    Last edited by 007Julien; 06-26-2012 at 10:54 AM.

  3. #3
    Join Date
    Jun 2012
    Posts
    4
    Beautiful piece of code Julien.

    Many thanks and appreciation for this.

    This was exactly what I was hoping to achieve.

    Cheers and have an awesome day.

    Jay

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