/    Sign up×
Community /Pin to ProfileBookmark

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

Hello there,

i’m trying to make a whole [color=blue]<tr>[/color] 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]
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’));
}
}
}
[/code]

The problem with the code is that tr[i].getAttribute doesnt seem to work. Apparently getElementsByTagName is a DOM function and returns a NodeList so i tried various things such as [color=blue]tr.item(i).attributes.item(2).nodeValue;[/color] but i couldn’t get anything to do what i wanted. Basically the [color=blue]<tr>[/color] for each of the clickable rows has an [color=blue]id[/color] and i want to append that [color=blue]id[/color] 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 (presumably for the same reason as above).

[code]
tr[i].onmouseover = function() {
tr[i].style.cursor=”hand”;
}
tr[i].onmouseout = function() {
tr[i].style.cursor=”pointer”;
}
[/code]

Thanks ?

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@vinnetouJun 21.2007 — Maybe this will help you:

<html >

<head>

<script type="text/javascript">

<!--

function test(prvek){

prvek.style.cursor="hand";

}

function test2(prvek){

alert(prvek.rowIndex);

}

-->

</script>

</head>

<body>

<table cellspacing="0">

<tr onmouseover="test(this)" onclick="test2(this)">

<td>1&nbsp;</td>

<td>aa</td>

</tr>

<tr onmouseover="test(this)" onclick="test2(this)">

<td>2</td>

<td>bb</td>

</tr>

<tr onmouseover="test(this)" onclick="test2(this)">

<td>3</td>

<td>cc</td>

</tr>

</table>

</body>

</html>
[/QUOTE]
Copy linkTweet thisAlerts:
@nanolucasauthorJun 21.2007 — That is SO MUCH simpler than i expected. I used that as a basis and got it working perfectly. Thank you so much!
×

Success!

Help @nanolucas spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...