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:document.location.href('bla.htm');" (not to forget: Setting a proper cursor with onmouseover/onmouseout).

While that works, it is a pity that the target URL is not visible in the status bar of a browser, unlike normal links.

So I just wonder if there is any room for optimization? Is it possible to display the URL that will be navigated to in the status bar of the browser? Or is there even a non-JavaScript way to make a tr clickable?

Answer 1

Fortunetly or Unfortunetly, most modern browsers do not let you control the statusbar anymore (it was possible and popular back in the day) because of fraudulent intentions. Your better bet would be a title attribute or a javascript tooltip.

Answer 2

If you're already relying on javascript for the click, then you can also use javascript to show the url in status area, change the cursor, or do other things so it looks more like a link. Of course, the browser may ignore the code that sets the status area.

Answer 3

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 4

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;
}

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

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 7

You might also try wrapping the content of your row's cells in an href and using CSS to push the href height/width to the internal bounds of each cell. The row itself wouldn't be clickable (unless you added additional html to the row) but most of the content space of the row would act like a normal link (cursor, status bar, etc). I can't remember off hand exactly how I did this before but I was reasonably successful getting this to work.

Edit: A comment asked for more details and they were covered by a later post from another user but I didn't realize that until I looked further into this suggestion and tested it.

If you add "display: block" CSS style tag to the anchor objects in the cells that you want to be clickable it will make the entire cell (minus any padding) act like a button. The cursor is displayed correctly and it previews the link destination in the status bar. This is all done with zero javascript. Good luck.

Answer 8

"

The most common (and only?) solution seems to be using JavaScript, by using onclick="javascript:document.location.href('bla.htm');" (not to forget: Setting a proper cursor with onmouseover/onmouseout).

"

The onclick-command should look like this:

onclick="window.location.href='bla.html';"

And it isn't necessary to do anything onmouseover/-out about the cursor as a cursor-property only works when the mouse is hovering the element:

style="cursor:pointer;"

Answer 9

If your table does not have links inside, following trick should work.

Put entire table into a link and change the href attribute of the link in rows onmouseover events.

Demo code:

<script type="text/javascript">
function setLink(elRow) {
var elLink = document.getElementById('link');
elLink.href = elRow.rowIndex + ".com";
}
</script>
...
<a id=link>
<table>
    <tr onMouseOver="setLink(this);"><td>first row</td></tr>
    <tr onMouseOver="setLink(this);"><td>second row</td></tr>
</table>
</a>

Answer 10

If you don't want to use javascript, you can do what Chris Porter suggested by wrapping each td element's content in matching anchor tags. Then set the anchor tags to display: block and set the height and line-height to be the same as the td's height. You should then find that the td's touch seamlessly and the effect is that the whole row is clickable. Watch out for padding on the td, which will cause gaps in the clickable area. Instead, apply padding to the anchor tags as it will form part of the clickable area if you do that.

I also like to set the row up to have a highlight effect by applying a different background color on tr:hover.