Making a Table Row clickable

Question

I wonder what the best way to make an entire tr clickable would be?

The most common (and only?) solution seems to be using JavaScript, by using onclick=\"javascript:

Answer 1

I have found this solution which works quite well:

$(document).ready(function() {
    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");

        if(href) {
            window.location = href;
        }
    });
});

Just don't forget to style the cursor as a pointer on tr:hover

#table tr:hover {cursor: pointer;}

Source: http://www.electrictoolbox.com/jquey-make-entire-table-row-clickable/

Answer 2

Another approach is to actually linkify the contents of each cell. You could change the style if necessary so they don't look like traditional links.

Note that what you are trying to do does break the intuitive user experience a little bit. It needs to be clear that clicking on a row does something. I usually prefer to put an icon at the edge of each row (a magnifying glass, etc.) which drills into a new page.

Answer 3

I realise this is an old thread with a perfectly legit solution in Alice's answer. There is however also a way to do this without javascript AND without duplicating your link * the number of columns AND keeping your markup/CSS valid. It took me a while to figure out, so I thought I'd post it here for others that also happen to end up on this thread like I did.

Put the link in the first column:

<table class="search_results">
    <tr>
        <td><a href="#">Some text</a></td>
        <td>more text</td>
        <td>more text</td>
    </tr>
</table>

This is perfectly fine markup, so your only real issue is getting that link to span the width of your table. I did it like this using pretty standard CSS:

table.search_results a {position:absolute;display:block;width:98%;}

Change the width to whatever you want and in principle you are done and dusted. So that is all relatively easy, however if you, like me, have a fluid/responsive layout, and also some standard styling on your links plus some padding on your tables, you are going to need these rules (copied necessary from above and added extra).

table.search_results td:first-child {padding:0;}
table.search_results a {position:absolute;display:block;width:98%;max-width:1272px;font-weight:normal;color:#000;padding:.5em;}
table.search_results a:hover {background:none;}
table.search_results tr:hover {border-color:#25505b;background:#b5d6dd;}

To explain: The first rule removes all padding on my first td ONLY. By default the padding on my td is .5em. The second rule adds the same padding back on the link, otherwise you end up with misaligned cell contents. It also corrects a few standard styles I have on my a to ensure the columns all look the same. You could do this the other way around too (add the link styles to your td). With the last two rules I get rid of the default hover effect on my links, then put it on the tr for any tables with the right class.

This works in the browsers I care about, but you should of course test in those you care about :) Hope I help save someone some minutes with this writeup!

Answer 4

Marko Dugonjic, in his blog maratz.com, explained how you detect a table row index with Javascript. In his example, when you mouse over any cell in a row, the entire row is highlighted.

See example, http://webdesign.maratz.com/lab/row_index/

and his article, http://www.maratz.com/blog/archives/2005/05/18/detect-table-row-index-with-javascript/

With a change, you can adapt this further by placing an onclick action.

Answer 5

With jQuery you can do something along these lines:

$('tr').click(function () {
  $(this).toggleClass('highlight_row');
}); 

Then add a highlight_row to your CSS file and that row will change its class to highlight_row. You could swap out whatever you want to do in that line (as well as change $('tr') to fit your specific row.

Answer 6

It's a hack but you can add this to your tr:

onmouseover="window.status='http://bla.com/bla.htm'" 

don't forget to style your fake links:

tr.clickable {
    cursor: hand; 
    cursor: pointer;
}