How Do I Make a Full Table Row Clickable?

Update 7/28/2010: I just wrote a new version of this article using jQuery. You can find the new article here.

It's a common scenario to display an HTML table with items, like products, employees and so on, and then link each item to a detail page where you can display the full details of this item.

The link is often represented by a button or text link in one of the columns. But to make it easier for your users to select a specific item, you could make the full row clickable. With a bit of JavaScript, this is pretty easy to do.

Often when people try to implement this behavior, they try to add an HTML link to each table cell, like this:
 

<table>
<tr>
  <td><a href="Details.asp">John</a></td>
  <td><a href="Details.asp">Doe</a></td>
</tr>
</table>

The disadvantage of this method is that not the entire table cell is linked, but just the text in that cell. You also need to add a lot of extra code to make each cell clickable.

To make the full row selectable, you should add the link to the <tr> instead of to individual table cells. Since you're not allowed to place an <a> tag around a table row, you'll have to think a little bit outside the box to solve this puzzle. Instead of using the <a> tag, you can implement a click handler with a JavaScript method attached to it for the table row as in the example below. To clearly communicate to the user that the entire table is clickable, I also added some code that changes the background color of the table row when the mouse hovers over it. This makes it easier to see which row is selected.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" 
             content="text/html; charset=iso-8859-1" />
    <title>Full Row Select</title>
    <script type="text/javascript">
    function ChangeColor(tableRow, highLight)
    {
    if (highLight)
    {
      tableRow.style.backgroundColor = '#dcfac9';
    }
    else
    {
      tableRow.style.backgroundColor = 'white';
    }
  }

  function DoNav(theUrl)
  {
  document.location.href = theUrl;
  }
  </script>
</head>
<body>
  <table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr onmouseover="ChangeColor(this, true);" 
              onmouseout="ChangeColor(this, false);" 
              onclick="DoNav('http://www.yahoo.com/');">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr onmouseover="ChangeColor(this, true);" 
              onmouseout="ChangeColor(this, false);" 
              onclick="DoNav('http://www.microsoft.com/');">
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr onmouseover="ChangeColor(this, true);" 
              onmouseout="ChangeColor(this, false);" 
              onclick="DoNav('http://Imar.Spaanjaars.Com/');">
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  </table>
</body>
</html>

On each <tr> element I have added the onclick attribute that calls the DoNav method. This will take the user to a new page whenever the user has clicked somewhere in the table row. To change the color of the rows when the mouse hovers over the table, I have also added the onmouseover and onmouseout attributes that call the ChangeColor method to change the background color of the table row.

You can check out a working example of this code. In the example I also added a bit of CSS to influence the borders of the table, so each row has a nice thin black border at the top and bottom side, but not between the columns on the left and right side. Look at the source of the page in the browser to see how it is done.


Where to Next?

Wonder where to go next? You can read existing comments below or you can post a comment yourself on this article .


Consider making a donation
Please consider making a donation using PayPal. Your donation helps me to pay the bills so I can keep running Imar.Spaanjaars.Com, providing fresh content as often as possible.



Feedback by Other Visitors of Imar.Spaanjaars.Com

On Monday, May 09, 2005 7:54:18 PM Luis said:
if you use firefox or an equivalent browser you can replace the onmouseover and onmouseout by a css style: tr:hover {background-color: Yellow; cursor: pointer;}.
On Wednesday, April 19, 2006 5:55:09 PM Ronne said:
Very helpful, thanks a lot!
On Wednesday, April 26, 2006 9:46:33 AM wayne said:
nice script.. does anyone know how to impliment the cursor: pointer command over the cell??? it doesnt seem to be working...

Also, i when the page loads the cell has no border by default... so when mouseover over the cell occurs the page moves when border is added.. which is not a good thing.. any ideas to correct this bug??

thx ;)
On Wednesday, April 26, 2006 6:54:53 PM Imar Spaanjaars said:
Hi Wayne,

Are you saying you have no border initially, but want to add one when you hover? In that case, the easiest thing to do is to *add* a border when the page initially loads, but you should give it the same color as the background. That way, the border is already there, taking up its space, and it only changes its color when you hover.

To change the cursor, you should be able to do something like this:

tableRow.style.cursor="hand";

tableRow.style.cursor="pointer";

Hope this helps,

Imar
On Thursday, April 27, 2006 7:49:05 AM Giorgio said:
Thx, great solution. Very simple!!!
On Monday, July 24, 2006 3:59:15 PM Kevin Field said:
There's only one drawback to this solution (which I was using already)--the UI of the web browser becomes broken in that the user no longer has the option of "open in a new tab/window" in the context menu...and emulating this is painful and sketchy.  Is there any way to have the functionality of surrounding a TR with an A without breaking W3C specs?

Kev
On Tuesday, July 25, 2006 8:49:20 PM Imar Spaanjaars said:
Hi Kevin,

Yeah, good point.

I see at least two fixes (work arounds, actually).

One is to use the old method, where each td contains an a tag that spans the entire cell (using display:block and an explicit width).

Alternatively, you could use JavaScript to detect whether the shift key was pressed and then open a new window instead of opening a new page in the same window....

Cheers,

Imar
On Monday, July 31, 2006 12:58:35 PM Kevin Field said:
Thanks Imar...I'll have to think about it.  I found out most of my users don't ever use tabs or new windows, so I guess it'd just be for me.  ;)  Anyway, I might end up just sending row data from the server using JSON and building the page from the data using JavaScript, so if I'm doing that anyway, I think I might end up using the 'old method' you cited.

Thanks again,
Kev
On Monday, July 31, 2006 6:43:04 PM Imar Spaanjaars said:
Hi Kevin,

You're welcome....

Imar
On Tuesday, February 27, 2007 5:29:38 AM Art said:
Your script saved the day!  Thanks to all your inputs.
On Wednesday, March 21, 2007 8:30:06 PM Doug said:
In the DoNav part of the code, is it possible to assign a target in the url?  I can't seem to make a target work.

Any help would be appreciated.

Thanks,

Doug
On Wednesday, March 21, 2007 9:58:32 PM Imar Spaanjaars said:
Hi Doug,

You'd use window.open instead. Do a Google search for it combined with the word JavaScript and you'll find many examples, including an explanation of all the options for the open function.

Cheers,

Imar
On Monday, August 27, 2007 4:53:23 PM Paul said:
Hi, thanks for your script, it is helping me a lot : ) I am trying to customize a thing. For example, my link is:

[a href="img/port/001.jpg" rel="lightbox[test]"][img border="0" src="img/port/001.jpg" width="109" height="80"][/a]

So in the onclick I use:

[onclick="DoNav('img/port/001.jpg);"]

and it is working ok. But I really need to use the rel="lightbox[test]" with the onclick event. Do you think it is possible to do it using this script?

Thanks for a great, simple and efficient script.
On Monday, August 27, 2007 6:58:45 PM Imar Spaanjaars said:
Hi Paul,

Sorry, I don't understand what you mean. Can you elaborate?

Imar
On Monday, August 27, 2007 7:24:27 PM Paul said:
Hi Imar,

Thanks for the reply ^^

Well, actually I am trying to use this: http://www.huddletogether.com/projects/lightbox2/

So, to use this i need to put rel="lightbox" in the link line (note the PART 2 from the LightBox webpage).

So, there is a way to write a text in a cell and use your script to click in the cell and load the LightBox? I think there is a possibility to the DoNav function handle this, but I dunno why.

Thanks again for the reply. ^^
On Monday, August 27, 2007 7:35:56 PM Imar Spaanjaars said:
Hi Paul,

Right, I see. I don't think so, or you may need to change the lightbox scripts.

As far as I know, lightbox intercepts the click on the link, finds the rel attribute and acts accordingly. I don't think (or at least I don't know how to do it) it will work with JavaScript generated clicks.

Sorry,

Imar
On Friday, November 02, 2007 6:31:51 AM robin said:
I have the following code which i like it to open in a new window and have the script pass a varialble to then next script. neither is working and could use some help with it.

[snip].....

this is emp_details.php
?php
echo "[br]Test ==:";
$testing = $_POST['test'];
echo  $testing;

it prints test==: but it doesn't echo the variable passed through the url
http://localhost/testing/emp_details.php?test=2
On Friday, November 02, 2007 6:34:23 AM Imar Spaanjaars said:
Hi robin,

Isn't that because of this:

$testing = $_POST['test'];

You pass values through the query string, yet you try to get the value from the post variables collection.

Hope this helps,

Imar
On Thursday, December 20, 2007 9:37:48 AM ken said:
How would I target an iframe window with this code?

document.location.href=myLink

my iframe name is myscreen
On Thursday, December 20, 2007 7:18:53 PM Imar Spaanjaars said:
Hi ken,

You can access the frames collection:

document.frames['iframename'].src = .....

HtH,

Imar
On Friday, December 21, 2007 6:27:23 AM Ken said:
Thanks alot!  It works great!  

http://www.medievalstudios.com

I'm working on the new site now.
On Friday, April 11, 2008 12:09:56 AM Steven said:
Great script. Thanks a bunch.

I am working on a PHP application which requires one to login. Once logged in, and one visits the current.php page for the first time, which lists a bunch of TR's in which I am using your DoNav function to link to another php page it logs the user out of the system. When the user logs back in and repeats the process it works just fine.

This only occurs the first time. Any future attempts to perform the same action allows for the link to work and open the php page I am linking to.

Do you think this is a problem with the JavaScript or PHP? Do you have any suggestions?

Thanks
On Friday, April 11, 2008 5:47:32 AM Imar Spaanjaars said:
Hi Steve,

That sounds like a PHP coding logic error. Try posting this (with code) on one of the numerous PHP forms. I think the Wrox forum (p2p.wrox.com) has PHP categories as well.

Cheers,

Imar
On Monday, June 09, 2008 3:02:12 PM Brendan said:
I am using your code in a table that pulls info from a database and is created with PHP.  Since I put your code within the PHP code I had to change your double quotes to single quotes, otherwise its the same.  the ColorChange function works but I cannot get the onclick function to work.  Any suggestions?  Thanks.
On Monday, June 09, 2008 5:36:40 PM Imar Spaanjaars said:
Hi Brendan,

Try posting this, with source code, on a forum like http://p2p.wrox.com You'll get much better PHP support.

Cheers.

Imar
On Tuesday, September 30, 2008 9:12:48 PM Martin said:
Thankyou very much, very useful
On Thursday, January 29, 2009 7:43:50 AM Rei said:
Thanks!
On Monday, February 02, 2009 5:52:49 AM Andrea said:
To implement hand pointer cursor change:

onmouseover="ChangeColor(this, true);"

to

onmouseover="ChangeColor(this, true), style.cursor='pointer';"

Thank you Imar for sharing a very useful script!
On Saturday, March 28, 2009 3:04:58 PM Rambabu said:
Thanks for providing such good and easily understandable example.
On Wednesday, April 29, 2009 12:22:05 PM YM said:
Great script. Is there anyway to display tooltip when mouse over? thanks,
On Wednesday, April 29, 2009 7:03:26 PM Imar Spaanjaars said:
Hi YM,

You can apply a title attribute to the table row or to the individual table cells.

Alternatively, you may want to look into jQuery or other client side JavaScript frameworks.

Cheerd,

Imar
On Wednesday, May 06, 2009 7:32:46 PM shanti said:
Hi ,

  Onclick i am trying to submit the form and unable to do so.Please help
On Wednesday, May 06, 2009 9:12:28 PM Imar Spaanjaars said:
Hi shanti,

I guess that all depends on the code you are using to submit. Can you post this on the Wrox forum (http://p2p.wrox.com/index.php?referrerid=385) as it's not so easy to post code here. If you send me the link I'll take a look. If it's related to this post, I'll try to come up with a reply.

Cheers,

Imar
On Thursday, May 07, 2009 11:54:40 AM YM said:
Appling a title attribute to the table row shows as tooltip. Thank you Imar!
On Thursday, June 04, 2009 6:26:49 AM Thomas Bill said:
This may be of use...

To have the link open in a new window simply change to the java script from document.location.href = theUrl;  to   window.open(theUrl);

e.g:

  function DoNav(theUrl)
  {
window.open(theUrl);
}
On Wednesday, June 24, 2009 4:56:54 PM king said:
Is there a way to exclude one section of the row from being clickable? I have a text field I also use to enter on the row that I would like a user to be able to click and select to enter text, but not automatically follow the link.
On Wednesday, June 24, 2009 5:21:17 PM Imar Spaanjaars said:
Hi king,

Haven't tried it but you could try handling onclick on the textbox and return false; it seems that event is bubbling up....


Imar
On Thursday, August 06, 2009 11:49:57 AM Lea said:
Hello could somebody help me
How i change this function :
function DoNav(theUrl)
  {
window.open(theUrl);
}
into this one. :
function nad()
{ if (DOGODEK_LINK_ID != '')
{
self.location.href  = 'crm_dogodek.php?DOGODEK_ID=' + DOGODEK_ID
+'&POD_ID='  + DOGODEK_ID;
}
else {
self.location.href  = 'crm_dogodek.php?DOGODEK_ID=' + ''
+'&POD_ID='  + DOGODEK_ID;
}
    
     }
Iwont that when I click on row I call a function witch gives an ID into other table on the same side.
P.S sorry about a language I'm a slovenian girl
On Thursday, August 06, 2009 1:08:19 PM Imar Spaanjaars said:
Hi Lea,

I am not sure I understand what you want. What are you trying to accomplish?

Imar
On Friday, August 07, 2009 12:38:30 AM david said:
Nice !

How would you modify your code so that when a row was clicked only the data on that row would be sent to a form submit?

thanks
On Friday, August 07, 2009 6:01:18 AM lea said:
Hello Imar
I wont that when I click on a table row send ID from one table to another but in the same page not url. just a function..
My code is:

function clickOnTableRow()
{
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(activeRowClickArray[tableObj.id] && this!=activeRowClickArray[tableObj.id]){
activeRowClickArray[tableObj.id].className='DOGODEK_ID';
}
this.className = arrayOfClickClasses[tableObj.id];
activeRowClickArray[tableObj.id] = this;
}

now this just do that when I click th row become red now I wont that when I click goes ID from Up table into down table.
A code for send ID is:

function nad(ID, LINK_ID)
{

if (LINK_ID != '')
{
self.location.href  = 'crm_dogodek.php?ID=' + ID
+'&POD_ID='  + ID;
}
else {
self.location.href  = 'crm_dogodek.php?ID=' + ''
+'&POD_ID='  + ID;
}     
        }
This code I heva to give into code onclick.
If You won't I can send you all my code but not here in a form.
Please help me I'm triing this two days and nothing.

Lea
On Friday, August 07, 2009 6:13:47 AM Imar Spaanjaars said:
Hi lea,

Rather than sending me the code, can you post it in one of the JavaScript categories of the Wrox forums located here: http://p2p.wrox.com/index.php?referrerid=385 and then send me the link?

Makes it easier to share code and for others to join - and learn from - the discussion. If you post there, please be sure to provide more information as I still don't understand exactly what you want.

Cheers,

Imar
On Friday, August 07, 2009 6:15:01 AM Imar Spaanjaars said:
Hi david,

You can store the ID (or another value) of the row in a hidden form field and then call document.forms[0].submit() to programmatically submit the form.

Hope this helps,

Imar
On Friday, August 07, 2009 6:47:17 AM lea said:
Hi i send it on http://p2p.wrox.com/java-basics-199/ , but i don't see my post anywhere. Maybe its not in yet.
On Friday, August 07, 2009 6:50:11 AM lea said:
Whats this where should I send my comment?

Hello lejka, our records indicate that you have never posted to p2p.wrox.com Forums before! If you have a programming question, please make your first post by asking your question in the right forum for the question. Or become part of the community by providing a useful answer to someone else's question. Be sure to only post your question to the right forum and respect other members. Thanks! Post to win prizes! Post more to increase your chances of being Wrox’s top poster of the month.
Lea
On Friday, August 07, 2009 7:22:28 AM Imar Spaanjaars said:
Hi lea,

I don't know. Did you sign up for an account at Wrox? Did you have to confirm it somehow?

Imar
On Friday, August 07, 2009 7:44:17 AM lea said:
this function is for click on row

// snip, code cut by imar //

I don't wont to have a picture in a table but just a row on click wich send ID in a teble in the same said. I think I just have to give this to code together but i don't know how.

LEA
On Friday, August 07, 2009 5:04:37 PM Imar Spaanjaars said:
Hi lea,

Please try the wrox forum again. It's a much better place to share code. I'll be more than happy to help you with this (once I figure out what it is that you want) but we need a better place to post code. The Wrox forum is a good place for this. Please spend some time on the site to find out how it works, sign up for an account and then post a message with *clear details* about what it is you're after. After three posts, I still don't understand you.
Please note: the Wrox forum is not my forum, so I cannot answer questions as to how it works.

Cheers,

Imar
On Saturday, August 29, 2009 7:33:58 AM Vikram said:
I had a different problem. I wanted to make an entire row clickable except for one cell because it had a checkbox.

[tr onclick="fn2()"]
    [td]some element[/td]
    [td]some element[/td]
    .....
    [td onclick="fn1()"]a checkbox is here[/td]
[/tr]

what I did was:
1. created an onclick event for that cell and set a variable to true when the onclick event  for that cell was called.
2. Then the row already had the onclick event written (which i didnt want to execute). so I checked the variable at the begining of the fn.
if(checkboxWasClicked) {checkWasClicked = false; return;}
The false is given to reset the flag.

Here is the pseudo code:

var checkboxWasClicked = false;
fn1()
{
    checkboxWasClicked = true;
}
fn2()
{
    if (checkboxWasClicked) {
        checkboxWasClicked = false;
        return;
        }
    //some other code that should execute if clicked on row except for that cell.
}

I got this idea from the above examples.
So Thanks a lot.
On Friday, January 15, 2010 3:51:00 PM Hugh Abbott said:
loved this !
On Monday, February 15, 2010 2:12:26 AM ben said:
Hi, i need to use a variable instead of a url, is there a way to do this in the DoNav?

onclick="DoNav(' . $ra_link . ') i get a missing argument with that.

Thanks.
ben.
On Monday, February 15, 2010 2:34:49 AM Imar Spaanjaars said:
Hi ben,

Look at your quotes; you're using it as a literal....

Imar
On Monday, March 01, 2010 7:19:48 PM Nick said:
Awesome post!  Trying to use it now, but I'm linking to a file rather than an external website.  I can get it to link to a website, but when I put the file path in, I can't get the link to run.

[tr onmouseover="ChangeColor(this, true);"
              onmouseout="ChangeColor(this, false);"
              onclick="DoNav('//server/directory/subdirectory/filename.pdf');"]

Any changes need to be made to have the link open a file?
Thanks!
On Monday, March 01, 2010 7:25:39 PM Imar Spaanjaars said:
Hi Nick,

Can you define "I can't get the link to run"? Does the link work in a standard anchor tag?

Cheers,

Imar
On Monday, March 01, 2010 8:06:27 PM clay said:
To control the size of the new window the linked row will open...


function DoNav(theUrl, windowtarget)
  {
    window.open(
        theUrl, windowtarget,
        ('width=820,height=550,screenX=100,screenY=100,left=420,top=150,toolbar=1,
                       location=0,directories=0,status=0,menubar=1,scrollbars=1,resizable=1')
        );
}
On Monday, March 01, 2010 8:35:58 PM Nick said:
Hi Imar,
Yes, with a standard anchor tag the link to open a .pdf works fine.  That was how my table was before.  The ASP queries the MS Access database, writes a table, and uses a field from the database as the filename to create a link to the corresponding .pdf.

I implemented your Clickable Row solution, and the Color Change works fine.  However, nothing happens when I click.  It just doesn't seem to recognize my path as a link.

Any thoughts would be appreciated.  Thanks much!
On Monday, March 01, 2010 8:47:48 PM Imar Spaanjaars said:
Hi Nick,

Have you tried changing the forward slashes to back slashes and doubling them to escape them?

DoNav('\\\\server\\directory\\subdirectory\\filename.pdf');

Cheers,

Imar
On Tuesday, March 02, 2010 2:39:48 PM Nick said:
Imar,
Yes, that did the trick!  It was the double slashes.
The solution is often something simple, isn't it?

Thank you.
On Tuesday, March 30, 2010 11:22:33 PM Girish said:
Hi Imar,

Very helpful. Saw at the right time. Thanks a lot!! Is it possible to pass hidden textbox value in one of td cells when entire tr is clicked? I would like to pass the a value in a row to ajax javascript function when row is clicked.

Thanks,
girish
On Friday, April 02, 2010 8:24:18 PM Imar Spaanjaars said:
Hi Girish,

Yes, it's possible. You could give each input box a unique ID and pass that in the hover call. E.g.:

onmouseover="ChangeColor(this, true. 'TextBox1');"

Then you can use document.getElementById and pass it the ID of the text box.

Note: this article is pretty old. Much of what is presented here can be accomplished with just a tiny but of jQuery code.

Cheers,

Imar
On Tuesday, May 11, 2010 3:52:17 AM Rich Puerto said:
Hello:
I am currently using this Java script (which I find it to be VERY useful) with a PHP code that I wrote which runs a MySQL query and puts the results into a Table.

My question is:  How can I  obtain,as well, the values of  cell[1] and cell[3] on the selected row when onclick occurs? and pass these values to the DoNav function. I need to declare these values with $_SESSION to use them in another PHP script

How can I pass these values to the DoNav Function?

(something like this.....)

onclick="DoNav('editform.php', Cell[1]?, Cell[3]?);">

I have not been able to find the right command to extract these values from the selected row.

Your help is really appreciated!

Cheers,

Rich
On Tuesday, May 11, 2010 8:46:14 AM Imar Spaanjaars said:
Hi Rich,

You can give each cell a unique ID and then use document.getElementById('YourCellId').innerHTML or innerText to get at the contents of the cell.

Alternatively, look into jQuery which makes these scenarios much easier as it allows you to easily traverse the DOM.

Cheers,

Imar
On Tuesday, May 11, 2010 9:16:20 PM Rich Puerto said:
Hello Imar,

Thank you for your prompt response.
I am new with Java, could you be so kind in providing a bit of more information on how the code should written as far as setting and ID to each cell and using document.getElementById('YourCellId').innerHTML . If not possible, then a link where to read more about this?

I am also looking at JQuery, as you recommended, to understand what other alternatives I have in order to accomplish what I need.

Cheers,
Rich
On Tuesday, May 11, 2010 9:28:43 PM Imar Spaanjaars said:
Hi Rich,

Just assign an ID to the table:

<td id="Whatever" .... />

And then get its value inside a function for example:

document.getElementById('Whatever').innerHTML;

If that doesn't help, can you reppost this question on a forum such as this one: http://p2p.wrox.com/index.php?referrerid=385
My web site is not the best place to discuss this and share code.

Cheers,

Imar
On Friday, May 28, 2010 5:49:47 AM steve said:
Trying to use your code at the top of this page but getting "PHP Parse error:  syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING" errors that are eluding to the onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://www.yahoo.com/');"
functions within the "tr" tag.  The only difference in how I'm using the code is I'm encoding the "tr" tag in php code using the echo command.  I've tried all different combinations of single and double quotes and but can't get it to work.  Any assistance would be appreciated!
On Friday, May 28, 2010 7:03:17 AM Imar Spaanjaars said:
Hi steve,

Hard to say without seeing your PHP code. Can you post this on a public forum such as this one instead:
http://p2p.wrox.com/index.php?referrerid=385

Easier to share code and easier for others to join the discussion.

Cheers,

Imar
On Wednesday, July 28, 2010 9:35:37 AM Imar Spaanjaars said:
For those of you following this article, I just posted an updated version of this article that uses jQuery instead of in-line JavaScript. You can find the article here: http://imar.spaanjaars.com/549/how-do-i-make-a-full-table-row-clickable-using-jquery

Regards,

Imar
On Wednesday, September 01, 2010 1:19:31 AM Ikari said:
THANK YOU!
On Monday, October 11, 2010 7:30:01 AM Vasif Mustafayev said:
Hi. Thanks for your How "Do I Make a Full Table Row Clickable?"
On Monday, October 11, 2010 7:30:06 AM Vasif Mustafayev said:
Hi. Thanks for your How "Do I Make a Full Table Row Clickable?"
On Tuesday, October 19, 2010 2:52:37 PM Tom said:
I want this but frames.
But how i can open in target_main?
Where I need to place this?
On Tuesday, October 19, 2010 4:27:15 PM Imar Spaanjaars said:
Hi Tom,

You can replace the code that sets the URL with something like:

window.frames['FrameName'].document.location.href = theUrl;

Cheers,

Imar
On Tuesday, October 19, 2010 7:46:10 PM Tom said:
Hi Imar

Thank you for you reaction.
I am doing this for school.
And I am 15 by the way so its a bit difficult for me.
Please give me more detailed information

Tom
On Thursday, October 21, 2010 2:06:13 PM Tom said:
Hi Imar

Do I need to replace this [ document.location.href = theUrl;
] for this [ window.frames['FrameName'].document.location.href = theUrl; ]

And if I want to open a frame called main.html.
What I need to change here [onclick="DoNav('http://Imar.Spaanjaars.Com/');">].
Target is main. Where I need to set that?

Thanks
Tom
On Thursday, October 21, 2010 2:34:37 PM Imar Spaanjaars said:
Hi Tom,

The most logical answer to that question is probably: why don't you try it out? ;-)  It should be something like that, although I haven't tested it (haven't used frames in years).

In the call to DoNav you should be able to pass just the page name.

Cheers,

Imar
On Thursday, October 21, 2010 2:56:32 PM Tom said:
Hi
Thanks. This was an assignment for school. You had a website with frames. I can already. But I wish for full table row clickable. I understand that now.
You also get a mark for the website. I have an 8 (English B). Thanks again
Kind Regards
Tom
On Thursday, October 21, 2010 3:00:46 PM Imar Spaanjaars said:
Hi Tom,

I am Dutch, so an 8 makes perfect sense to me ;-)

Congratulations!

Imar
On Thursday, October 21, 2010 3:06:50 PM Tom said:
HAHAHAHAHAH
ik ben ook nederlands
heb ik voor niets al die teksten zitten vertalen
On Thursday, October 21, 2010 3:19:40 PM Tom said:
Waarom doe(t) je (u) de website dan in het engels?
Om meer bezoekers te krijgen denk?
On Thursday, October 21, 2010 3:20:17 PM Imar Spaanjaars said:
Had ik al gezien / gedacht op basis van je naam. Maar in het Engels is vaak makkelijker, want dan hebben anderen er wellicht ook wat aan.

Groeten,

Imar
On Thursday, October 21, 2010 3:21:33 PM Imar Spaanjaars said:
Je mag wel je zeggen.... ;-)

Ja, het grootste deel van mijn bezoekers komt niet uit Nederland.
Daarom zijn mijn boeken ook in het Engels.....

Imar
On Thursday, October 21, 2010 3:24:04 PM Tom said:
Wat voor boeken schrijf je dan?
On Thursday, October 21, 2010 3:25:22 PM Imar Spaanjaars said:
Hier vind je ze alle 5: http://imar.spaanjaars.com/about/aboutmybooks/overview

Groeten,

Imar
On Thursday, October 21, 2010 3:30:06 PM Tom said:
Jij heb wel verstand van computers zeg. :o
Als ik vastloop met informatica hoor je nog wel van me xD

On Thursday, October 21, 2010 3:32:00 PM Imar Spaanjaars said:
Of koop een van m'n boeken..... ;-)

Imar
On Thursday, October 21, 2010 3:33:16 PM Tom said:
hahah ja zal ik doen
maar me engels is nog niet zo goed :$
kben 15
Tom
On Thursday, October 21, 2010 3:37:47 PM Tom said:
http://www.bol.com/nl/c/engelse-boeken/imar-spaanjaars/1748359/alle-artikelen.html
Je schrijft echt grote boeken :o
Als ik later misschien iets in de ICT wordt koop ik het wel.
Is nu veelste moeilijk voor mij
On Monday, February 14, 2011 12:27:36 PM php developer said:
Am i right that this way of getting clickable table rows will only work when no table bgcolor/css class background-color is selected in the cells ?

I'm only getting it to work when i have the cell background attribute set to transparent, maybe because a table row will be hidden behind the table cells otherwise. The examples I 've seen around so far do not include a bgcolor in each cells. Correct me if I am wrong (hope I am..)
On Tuesday, February 15, 2011 8:09:06 AM Imar Spaanjaars said:
Hi there,

It can also work when cells have a color applied but it takes a bit more work. The easiest way to do it is with jQuery. For an explanation, see the original article on jQuery:
http://imar.spaanjaars.com/549/how-do-i-make-a-full-table-row-clickable-using-jquery

To highlight cells, I made a few changes to the original demo. You can find the new version here:

http://imar.spaanjaars.com/Demos/FAQs/FullRowSelectjQuery/ColoredCells.html

I added a class called DefaultCell and assigned that to a few cells. Next, I changed the code that toggles the CSS class to this:

$(this).find('td').toggleClass('Highlight');

In other words, when you hover over the row, the child td elements get a new class. For this to work, it's important that DefaultCell is defined before Highlight in your CSS.

For the plain JavaScript version, take a look here:

http://imar.spaanjaars.com/Demos/FAQs/FullRowSelect/ColoredCells.aspx

This works pretty much the same and assigns the color to the td element. When you hover over it, I loop over the cells and change the background color.

The disadvantage of the latter solution is that it currently only works for all cells in the row. If you have specific colored cells that you want to change on mouse over, and restore on mouse out, you need to write additional code to maintain the original color or CSS class. Once you go down that route, you might as well use the jQuery version as i's a lot easier to write.

Hope this helps,

Imar
On Thursday, March 03, 2011 9:02:15 AM Nick said:
Would you please help me to get an id generated dynamically from a clickable row. eg like the way gmail or yahoo works as you click a given row.
On Sunday, March 06, 2011 1:11:57 PM Imar Spaanjaars said:
Hi Nick,

Not sure I understand what you mean with "an id generated dynamically from a clickable row".

Cheers,

Imar
On Wednesday, April 06, 2011 1:04:59 PM Mary said:
I have a split frame page, on the left is a table of images that I have added your coding to make the rows clickable.  I am wondering if it is possible to adjust the code to send the row into the right frame for closer viewing.  

One would click on thumbnail table row which would cause the larger images to appear on the right for better viewing.  

I've only worked with simple html, so I'm a little out of my element.
On Wednesday, April 06, 2011 1:10:27 PM Imar Spaanjaars said:
Hi Mary,

Look at the answer I provided to Tom earlier. Additionally, take a look here:

http://javascript.about.com/library/bltarget.htm

http://www.google.com/#sclient=psy&hl=en&q=javascript+target+link+frame

Cheers,

Imar
On Friday, July 15, 2011 6:05:54 AM Jeroen said:
Great script. Thanks!
On Friday, July 15, 2011 6:05:56 AM Jeroen said:
Great script. Thanks!
On Monday, February 13, 2012 4:08:03 AM Alan said:
How do you make every other row a different color and it goes back to that color after the onmouseout?  So I want row 1 to be grey, row 2 to be yellow, row 3 to be grey, etc.  Then on mouseover it gives the one dark grey color for all rows.  Then it should go back to the color it was before.  
On Monday, February 13, 2012 8:38:02 AM Imar Spaanjaars said:
Hi Alan,

Before you change the color, you need to store the old color somewhere. Then on mouse out, you can restore that color again. This is easy to do using jQuery and its data() method: http://api.jquery.com/data/

Cheers,

Imar
On Monday, February 13, 2012 6:52:06 PM Alan said:
Thank you for the quick response.  I can get the jquery info into the code, but how do I mix it with the onmouseout function for certain rows?  
On Monday, February 13, 2012 7:18:29 PM Imar Spaanjaars said:
In ChangeColor, when highlight is true, store the value in the element you're changing. When highlight is false, retrieve the value again and use it to set the background color.

You can make this all jQuery as described here: http://imar.spaanjaars.com/549/how-do-i-make-a-full-table-row-clickable-using-jquery

You can use hover to define the mouse over and mouse out behavior.

Finally, if you use toggleClass, you can *add* an additional class when you hover and remove it again on mouse out. This way, you can leave the existing CSS code alone which makes everything much easier. An example can be found here:

http://imar.spaanjaars.com/Demos/FAQs/FullRowSelectjQuery/Colors.html

You need !important in the Highlight class to override the existing background-color.

Cheers,

Imar
On Monday, February 13, 2012 8:06:58 PM Alan said:
To test your code on one of my test webpages, the red green and yellow rows appear.  When I hover over it, the red goes away and stays away until I hover over it again, then the red comes back.  In the link you provided, it works like a charm.  http://imar.spaanjaars.com/Demos/FAQs/FullRowSelectjQuery/Colors.html

Not sure why my test page does not go back to the original color when you first hover off of the row.  Do you know why this might be?
On Monday, February 13, 2012 8:38:58 PM Imar Spaanjaars said:
Hi Alan,

Nope, almost impossible to say without seeing the code or your test page.

Cheers,

Imar
On Monday, February 13, 2012 8:40:16 PM Alan said:
Test page is http://www.uberthons.com/testschedule
On Monday, February 13, 2012 8:43:47 PM Imar Spaanjaars said:
You're using a very old version of jQuery. Could that be it?

Imar
On Monday, February 13, 2012 8:48:16 PM Alan said:
Likely.  I am using Joomla as my editor.  Is there another way to incorporate jquery besides putting it into my html editor?  I'm not very familiar with a lot of programming.  
On Monday, February 13, 2012 8:51:35 PM Imar Spaanjaars said:
Well, you need it in your HTML somewhere. You could make it easier by linking to an external file so you don't have to add the library to your own site:

http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

Cheers.

Imar
On Monday, February 13, 2012 9:28:37 PM Alan said:
Great, having Google host jquery works perfectly.  Thank you for all your help.
On Tuesday, February 14, 2012 2:58:07 PM Alan said:
How do you make the header non-clickable and therefore non highlighting?
On Tuesday, February 14, 2012 3:00:14 PM Imar Spaanjaars said:
I think you could use th elements rather than tr elements for the headers....

Cheers.

Imar
On Tuesday, February 14, 2012 3:05:57 PM Alan said:
Yep, just figured it out.  Thanks again.  And I put the id="link-table" in the tbody instead of table.  Works Great.
On Monday, March 26, 2012 11:18:48 AM - said:
Excellent example! Thank you!
On Wednesday, August 15, 2012 2:23:05 PM Samuel said:
Hello Imar,

I want to know if it's possible to change the behavior when the pointer is over the cell:

In your example the backgroundcolor changes. What I'm searching for is to have the textcolor to change, to be more precise, when I "touch" the cell with my pointer the textcolor has to change.

How to preoceed?
Thank you
Sam
On Monday, August 20, 2012 9:44:07 AM Imar Spaanjaars said:
Hi Samuel,

You can do the exact same thing, but handle the onmouseover for a cell instead of a row. In addition, you could handle onclick instead of onmouseover.

Cheers,

Imar
On Friday, September 21, 2012 9:19:19 AM Kasper said:
Hi Imar,

Thanks for this script, it may just solve my problem, but I'm not quite there yet...

I have a document.write script on my site that creates a table with nicely formatted text, and turns it all into a selectable, reactive, normal link;

document.write('table-tag tr-tag td-tag text... /td /tr /table '.link('doc.html'));

... Except in IE, as we all know. The link actually works fine in IE too, up until the point when it's clicked (it reacts to mouseover, displays the url of the link in the status bar, but is unclickable; nothing happens).

So I thought I'd just use this trick, but it turns out I was wrong, because if I enter;

onclick="DoNav('http://Imar.Spaanjaars.Com/');"

.. In the table that is created by the document.write function, then I get a syntax error from the document.write(' onclick="DoNav('http://www.microsoft.com/');"') because the url is specified by the use of '', aswell as the document.write text.

At this point I'm considering giving up on tables, as IE is just too retarded apparently. But my problem here is so simple; I just want to give my users a link that is formatted in CELLS : P

So I just want to check with you before I abandon this; is there any way to make document.write produce another javascript in turn?

Thanks Imar!
On Friday, September 21, 2012 9:32:07 AM Imar Spaanjaars said:
Hi Kasper,

Not sure why you're using document.write, but yes, you can write other JavaScript if you escape the quotes:

document.write('alert(\'Test\');');

Hope this helps,

Imar
On Friday, September 21, 2012 10:31:00 AM Kasper said:
Oh Imar,

That is just beautiful, this has completely fixed my problem and expanded my knowledge of how html works, I had no idea that you can escape quotes.

I couldn't have asked for more, thank you so much : )


PS: Yes, document.write is a bit wierd, but I need this to create a small list of links that is going to appear on every page, so this is just a solution to a lot of future copying and pasting (I run the document.write script from a .js file, so I'll only have to update that in the future).
On Sunday, November 10, 2013 4:09:47 AM Tyler said:
This works great. Im curious if there is a way to display the link url rollover status in the lower left of the browser common like you see appear for any normal link
On Sunday, November 10, 2013 9:15:29 AM Imar Spaanjaars said:
Hi Tyler,

I don't think you can anymore. You can update the window's status bar with JavaScript but most browsers don't show the status bar anymore. The link tooltip that browsers display is the actual link (so you can't be tricked into clicking an unknown link) and since in this case there is no link but only JavaScript, I don't think you can let the browser display the linked page in a tooltip.

Cheers,

Imar
On Wednesday, June 25, 2014 2:02:29 AM tumbas said:
It works, mantap (y)
On Saturday, October 25, 2014 6:12:50 AM Jaishankar said:
Can u please make onClick TableRow(tr).It has to display the full details in that Tablerow(tr) itself like some division or section.
The other table row has to be display in the down of that section and if i click on that other table row it has to be display their details.
On Saturday, October 25, 2014 11:27:28 AM Imar Spaanjaars said:
Hi Jaishankar,

Not sure I understand what you're asking. Doesn't this post provide all the details needed to write this yourself?

Imar

Talk Back! Comment on Imar.Spaanjaars.Com

I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.

When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.

If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the QuickDocId of the document.

For more information about the Talk Back feature, check out this news item.