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.

[jscheuer1]

In the standard event model tables don't receive focus. But this is a pretty close. They can at least in a relative way in IE's event model, so for IE it acts as requested. For non-IE it checks for keydown on the document and if there's a highlighted row, moves to the next. I elected to not move if none were highlighted or if no more in the given direction were available. That behavior can be changed.

Replace:

var color = "#E1E0D7"
var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
var n = rows.length;
var bgcs = [];
for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;

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) {
		rows[i].style.backgroundColor = color;
		}//end of if
	}//end of for
}//end of function

if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);



}//end of onload

With:

var currow;
var color = "#E1E0D7"
var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
var n = rows.length;
var bgcs = [];
for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;

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) {
		currow = i;
		rows[i].style.backgroundColor = color;
		}//end of if
	}//end of for
}//end of function
if(document.addEventListener && (window.opera || !window.attachEvent)){
	for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
	document.addEventListener('keydown', function(e){
		if(e.keyCode == 38){if(currow > 1)changeColor({target: rows[--currow]});}
		if(e.keyCode == 40){if(currow < n - 1)changeColor({target: rows[++currow]});}
	}, false);
}
else{
	for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
	document.getElementById('mstrTable').attachEvent('onkeydown', function(){
		if(event.keyCode == 38){if(currow > 1)changeColor({target: rows[--currow]});}
		if(event.keyCode == 40){if(currow < n - 1)changeColor({target: rows[++currow]});}
	});
}



}//end of onload

[jason_kelly]

WOW! Rocket Science at play here.

It works great jscheuer1.

Thanks so so very much for all your help with this.

This was beyond my level of understanding of Javascript and the DOM.

Cheers and have an awesome day.

[jscheuer1]

Great! Here's a different version. I found a way to detect a focus like event in non-IE, and changed the logic of what happens at the top and bottom rows. Replace the same code block:

var currow;
var arrowApproved = false;
var color = "#E1E0D7";
var mstr = document.getElementById("mstrTable");
var rows = mstr.getElementsByTagName("tr");
var n = rows.length;
var bgcs = [];
for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;

function changeColor(e) {
if(e && e.type === 'click'){
	arrowApproved = true;
}
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) {
		currow = i;
		rows[i].style.backgroundColor = color;
		}//end of if
	}//end of for
}//end of function

function arrowTest(e){
	var t = e.target;
	while((t = t.parentNode)){
		if(t === mstr){arrowApproved = true; return;}
	}
	arrowApproved = false;
}

function arrowKeys(e){
	if(e && !arrowApproved){return;}
	e = e || event;
	var k = e.keyCode;
	if(k === 38){currow > 0 ? changeColor({target: rows[--currow]}) : changeColor({target: rows[n - 1]});}
	if(k === 40){currow < n - 1 ? changeColor({target: rows[++currow]}) : changeColor({target: rows[currow? 0 : 1]});}
}
if(document.addEventListener && (window.opera || !window.attachEvent)){
	for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
	document.addEventListener('keydown', arrowKeys, false);
	document.addEventListener('click', arrowTest, false);
	//document.addEventListener('focus', arrowTest, false); // may be required if there are forms on the page and/or to change behavior if tab key is used
	
}
else{
	for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
	document.getElementById('mstrTable').attachEvent('onkeydown', arrowKeys);
}



}//end of onload

I added a focus event, but have it commented out. It affects how the use of the tab key will affect 'focus' on the table. It could be good to use if there are forms on the page. It's optional otherwise and has the effect that if the tab key is hit a few times, the table loses 'focus' and must be clicked on again to approve the arrow keys.

A different variation might be good. One where all browsers do not wait for a click on the table to focus it. That way users with no pointing device could use their arrow keys. Let me know what you think.

[jason_kelly]

Wow!

Amazing what you and a wrench could do lol.

I was thinking...is there a way to write a seperate function that would go to the specified row and highlight it as well? I guess the same function, once executed again would need to unhighlight the curr row and highlight the new one.

ie. function goto_row(row) () {}

I can't figure this out either. Im pretty slow at this stuff.
But I was thinking like goto_row(4) and it would highlight and go to row 4. If I execute it again goto_row(6), it would then unhighlight row 4 and highlight row 6.

An arms lenght here of a guess, but what would the code be for that?

Ps. wonderful work and much thanks for everything you've done so far.

Jay

[jscheuer1]

Add this function (highlighted) in the spot indicated:

 . . . tion arrowKeys(e){
	if(e && !arrowApproved){return;}
	e = e || event;
	var k = e.keyCode;
	if(k === 38){currow > 0 ? changeColor({target: rows[--currow]}) : changeColor({target: rows[n - 1]});}
	if(k === 40){currow < n - 1 ? changeColor({target: rows[++currow]}) : changeColor({target: rows[currow? 0 : 1]});}
}
window.gotoRow = function(num){
	changeColor({target: rows[num], type: 'click'});
	setTimeout(function(){arrowApproved = true;}, 0);
	mstr.focus();
	return false;
};
if(document.addEventList . . .

Now you can make links to highlight specific rows, example:

<a href="#" onclick="return gotoRow(2);">Row 2</a>

[jason_kelly]

Wow incredible piece of work.

I never though of piggy backing off of the click.

How you did it was completely astonishing to me, definetly added this to my personnal dictionary of javascript.

Again, thank you so so very much for your wonderful help.

If I ever need help again, I hope your around for a long while.

This has been a fun project. Thanks again so much for helping me out!

Highly and greatly appreciated.

Ps. who do I make out the cheque too?

Cheers and have a splendid awesome day!

Jay!

[jscheuer1]

I'm assuming you don't mean the click on the link, that's pretty straightforward.

Other than that, I'm not using just type: 'click', and only using it to make changeColor think a row was clicked. And the function gotoRow has stuff in it that satisfies various browsers, not all browsers need or will use all of it, but none of it appears to hurt any of them.

Ps. who do I make out the cheque too?

If you're serious about that, none is required. But if you like, you can donate to my PayPal account:

Donate