Javascript code to use onclick() event on a table row

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
nano
Forum Newbie
Posts: 8
Joined: Tue Jun 19, 2007 9:31 am

Javascript code to use onclick() event on a table row

Post by nano »

Hello there,

i'm trying to make a whole <tr> clickable as a link. Javascript seems to be the only way i can figure out to do this. The following is the code i currently have, it just wont go to the correct place.

Code: Select all

function trlink(){
	var tr = document.getElementsByTagName("tr");
	for(var i=0; i < tr.length; i++) {
		tr[i].onclick = function() { 
			location.href='./?cat='+(tr[i].getAttribute('id')); 
		}
	}
}
The problem with the code is that tr.getAttribute doesnt seem to work. Apparently getElementsByTagName is a DOM function and returns a NodeList so i tried various things such as tr.item(i).attributes.item(2).nodeValue; but i couldn't get anything to do what i wanted. Basically the <tr> for each of the clickable rows has an id and i want to append that id to the end of the url.

Can anyone help me here?

Also as a secondary matter, i'd like the row to appear as a link so what is the code for changing the mouse to the link hand and back? Also how do you change the status bar text to the url (for browsers which support it).

This is the code that i tried but it didn't seem to work.

Code: Select all

tr[i].onmouseover = function() { 
			tr[i].style.cursor="hand";
		}
		tr[i].onmouseout = function() { 
			tr[i].style.cursor="pointer";
		}
Thanks :)
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

I'm not sure if making the table row clickable would work. Try making the table cells clickable.

And you have "hand" mistaken for "pointer." The cursor you get when you mouseover a link is "pointer." The regular cursor is "default." "hand" hasn't existed for years.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I would use "this" because "tr" doesn't mean anything in the closure.
nano
Forum Newbie
Posts: 8
Joined: Tue Jun 19, 2007 9:31 am

Post by nano »

The way i ended up solving this was actually much simpler than i had anticipated.

<tr class=\"newsh4b white\" height=\"75\" id=\"".$cats[$e][0]."\" onclick=\"trlink(this)\" onmouseover=\"mousehand(this)\" onmouseout=\"mousepointer(this)\">

Code: Select all

function trlink(tr){
		location.href='./?cat='+tr.id; 
}

function mousehand(tr){
		tr.style.cursor="hand";
}

function mousepointer(tr){
		tr.style.cursor="pointer";
}
That was all i needed and it works perfectly. 'Hand' does actually bring up the link hover cursor. And pointer sets it back to normal.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

I don't know if this is the best way but, why don't you use the onclick event attribute?
Post Reply