Convert Table Row to Hyperlink
Well I saw a post here on the asp.net forums wanting to take a single column that contains a hyperlink and make the whole row clickable.
Well, I talked about making the whole row clickable here on my blog before, but the user wants to take a hyperlink from one of the columns and do it. A light bulb went off in my head and I coded this in two minutes.
<html>
<head>
<style type="text/css">
table{
border: 1px solid black;
border-collapse: collapse;
width: 50%;
}
th, td{
border: 1px solid black;
padding: 3px;
width: 25%;
}
th{
background-color: #A0A0A0;
}
tr{
background-color: white;
}
tr.highlight{
background-color: #B8CDDC;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
ConvertRowsToLinks("table1");
}
function ConvertRowsToLinks(xTableId){
var rows = document.getElementById(xTableId).getElementsByTagName("tr");
for(i=0;i<rows.length;i++){
var link = rows[i].getElementsByTagName("a")
if(link.length == 1){
rows[i].onclick = new Function("document.location.href='" + link[0].href + "'");
rows[i].onmouseover = new Function("this.className='highlight'");
rows[i].onmouseout = new Function("this.className=''");
}
}
}
</script>
</head>
<body>
<table id="table1">
<tr>
<th>Website</th>
<th>Subject</th>
<th>Content</th>
</tr>
<tr>
<td><a href="http://www.JavaRanch.com">JavaRanch</a></td>
<td>Java</td>
<td>Content and Forums</td>
</tr>
<tr>
<td><a href="http://www.asp.net">ASP.NET</a></td>
<td>.NET</td>
<td>Content and Forums</td>
</tr>
<tr>
<td><a href="http://radio.javaranch.com/Pascarello">Eric's Blog</a></td>
<td>JavaScript,.NET,and Stuff</td>
<td>Programming Discussion</td>
</tr>
</table>
</body>
</html>
Basically we are grabbing the table's rows. We than loop through each of the rows looking for a link. If a link exists, we grab the href and attach an onclick event to the element. To make it fancier, I added some mouse events so the row is highlighted.
Hope this is helps,
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
TrackBacks[0]
Comments[27]
Posted by pascarello on May 19, 2005 8:37:03 AM EST
Reply |
Permalink
Re: Convert Table Row to Hyperlink
Thank you, it was very useful!!
Comment from Dinis on June 28, 2005 12:44:21 PM EST
This is the nuts, save me a lot of time!
Comment from JJ on January 24, 2006 12:11:18 PM EST
i have a question for u...what do i do if i want that link to open in a new window?
Comment from Anonymous on June 30, 2005 10:16:18 AM EST
rather easy to do
change the line:
rows[i].onclick = new Function("document.location.href='" + link[0].href + "'");
to
rows[i].onclick = new Function("var newWin = window.open('" + link[0].href + "')");
Eric
rows[i].onclick = new Function("document.location.href='" + link[0].href + "'");
to
rows[i].onclick = new Function("var newWin = window.open('" + link[0].href + "')");
Eric
Comment from Eric Pascarello on June 30, 2005 10:22:28 AM EST
What about more multiple tables on one page
Comment from Anonymous on July 27, 2005 6:54:08 AM EST
then call the function for each table.
window.onload = function(){
ConvertRowsToLinks("table1");
ConvertRowsToLinks("table2");
ConvertRowsToLinks("table3");
}
Eric
Comment from Eric Pascarello on July 27, 2005 11:34:23 AM EST
error:document.GetElementByID(...) is Null or Not an Object
I had included the script on my MAINPAGE.ASP while the processed code was transfered to SECONDPAGE.ASP where also the script was included. The error was caused because the SECONDPAGE.ASP was calling the script too??? Cause when I removed the script from the secondpage it stopped giving the error message.
I had included the script on my MAINPAGE.ASP while the processed code was transfered to SECONDPAGE.ASP where also the script was included. The error was caused because the SECONDPAGE.ASP was calling the script too??? Cause when I removed the script from the secondpage it stopped giving the error message.
Comment from martin on March 4, 2006 9:17:54 AM EST
Thank's I was being a bit think, i'd tried that but had a error elsewhere that was stopping it working, Thanks for the relpy ;)
I have another question though:
I have a table that have two rows per record, but only for some record as it's conditional based on the content of the record. How would I get this conditional row to also be included in the link/rollover behavior?
Comment from Anonymous on July 28, 2005 3:38:07 AM EST
You would have to do some sort of check with rows[i+1].
Eric
Comment from Eric Pascarello on July 28, 2005 9:53:57 AM EST
This is exactly what I was looking for, thank you. I am a bit of a javascript noobs, but have a lot of experience creating clean CSS layouts as well as php coding and also have an understanding of the DOM, so it's not much of a jump for me to get into javascript. I updated the function a little bit, so that it keeps existing styles intact and it also changes the window status text so it works like a real link.
rows[i].onmouseover = new Function("this.className='highlight'; window.status='" + link[0].href + "';");
rows[i].onmouseout = new Function("this.className='" + rows[i].className + "'; window.status='';");
Comment from Brandon on November 22, 2005 9:39:39 AM EST
Great example code. Exactly what I was looking for.
Comment from Mike on December 8, 2005 10:49:18 AM EST
Great Example..but the only problem is that in ie referrer is not passed. Can you suggest a method so referrer is also passed.
Comment from Anonymous on January 30, 2006 8:18:45 AM EST
Any way of changing the row color of a visited link?
Comment from Anonymous on February 1, 2006 10:43:10 AM EST
I was wondering if you know an error about window.load? I'm using Firefox (don't know if that has to do with it) but I put an alert in it to debug the code and it isn't getting called.
Any idea?
Comment from Anonymous on March 4, 2006 3:59:02 PM EST
Just what I was looking for.
(my target in the <a href) doesnt work.)
If I want to open the link in a new window I use target="_blank" in the a href line. It works without the "convert table row" but not with it.
Hope you can explain this
Comment from Anonymous on May 22, 2006 7:37:36 PM EST
Did you read through th comments? http://radio.javaranch.com/pascarello/2005/05/19/1116509823591.html#comment1120144948690. It was asked on how to open links in new windows.
Eric
Eric
Comment from Eric Pascarello on May 23, 2006 1:48:53 AM EST
Hi
Great stuff
Question:
What if I only want to have the column as a link and not the row ?
I have a row with several columns, and I would like each column in the row as a link
I am not that good in javascript, so I hope you can help
Thanks in advance
Comment from Ed on May 27, 2006 6:55:28 PM EST
Hey, looks great.
How can I make the JavaScript external? I'm quite a newbie on the JS-area, but I need this very much.
Comment from Toby on October 4, 2006 6:26:32 AM EST
awesome code, very useful. I had another question for a similar case you probably can help me with. How to highlight a table row when a link is clicked on a cell in the same row?
Comment from carlos on January 7, 2007 1:29:09 PM EST
hello.....
i need to enable one column as hyperlinked one to which the data is extracted from databse. if that hyperlink is clicked,a new window has to be opened. please its urgent.
expecting ur response soon.
Comment from Archana on January 8, 2007 2:48:27 AM EST
Are you still following this old thread??? If so..is there a way to modify the onclick portion of the function to pass an HREF that refers to another JavaScript to open a popup window. I am using a thumbnail of an image that the users would click and the script will open a popup window with a full version of the image. I have your version working just fine untill I add the javascript HREF then it doesn't "see" the link so it doesn't make the row clickable.
TIA if you are still out there.
Comment from Bob on February 9, 2007 11:15:56 PM EST
This worked great! Thank you. I did need to direct the href to an iframe but no problem:
rows[i].onclick = new Function("parent.frames['frame2'].document.location.href='" + link[0].href + "'");
rows[i].onclick = new Function("parent.frames['frame2'].document.location.href='" + link[0].href + "'");
Comment from Anonymous on February 13, 2007 12:43:31 AM EST
Hi Eric, I love this script. It's easy to understand!
But, I have a question. I'm using this for my cms that I'm working on at the time, and it's basicly an interface like PhpMyAdmin: a list of items in a table, with checkboxes in front of each item (<tr>). If I click the row, I want to go to a page that displays all the parts of this item, but I don't want to do this when clicked on a checkbox. So my question is, how can I 'eliminate' 1 column cell from this hyperlink?
Comment from Robbert on March 11, 2007 12:44:21 PM EST
Just remove the href from that column and you'll be fine :)
Comment from frW on April 22, 2007 6:16:59 AM EST
Robbert,
Take a look at: http://www.quirksmode.org/js/events_order.html
Eric
Comment from Eric Pascarello on March 11, 2007 3:18:12 PM EST
Hi Eric,
I have a little question about it.
I have a table which has alterative rows color. For example the first row background color is #FFFFFF, the second row's background color is #AAAAAA, the third row's background color is #FFFFFF, the fourth row's background is #AAAAAA again, and so on. When I use your script, after I move over all of the rows, the rows background will be #FFFFFF. How can we recover all rows' style after mouse move out?
Thanks
Comment from Tim on April 3, 2007 11:17:26 PM EST
Very good mate.. it is very very helpful..!!
Comment from Anonymous on April 4, 2007 7:24:22 PM EST
TrackBack to http://radio.javaranch.com/pascarello/addTrackBack.action?entry=1116509823591