Use Arrows keys to move to and highlight row

[jason_kelly]

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.

[007Julien]

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

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

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)

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...

[jason_kelly]

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