Make <tr> to act like <a>

Question

I have a table and I want every row to be clickable. Right now, I'm doing the simple:

$('tr').click(...)

This works for the most part but how can I make it act like a link in these ways:

• Shift-click opens the target in a new window
• Middle clicking opens the target in a new tab
• Hovering shows the link address in the status bar

Answer 1

That's technically feasible in some browsers, but not all, and for those that do support it, it's a lot of work. You have to intercept the keyboard and non-left click events. You'd probably be better off just wrapping the contents of each TD in a regular A tag.

Going the JS/override route also doesn't degrade gracefully... if all you're doing is truly just linking to another page like a typical HREF, it's almost silly to make that dependent on JavaScript.

Answer 2

One option would be to implement .mouseUp() and detect manually the shift and ctrl keys, and which button was pressed. That, of course, sounds prone to all manner of ugly failures, wherein you miss some quirk of an individual user's setup.

Instead, how about automatically adding an <a> tag to every cell that does what you want. In jQuery, that's just:

$('tr th, tr td').wrapInner('<a href="..."></a>').children('a').click(function() {
    ...
});

Answer 3

I think you need to make it a link by actually enclosing it in an <a> tag, so 'hovering' will show the link address in the status bar.

The behaviour of right and middle-click surely depends on the browser configuration.

Answer 4

I'd suggest using an <a> tag inside each cell:

<table>
<tr>
  <td><a href="...">...</a></td>
  <td><a href="...">...</a></td>
  <td><a href="...">...</a></td>
</tr>
</table>

With this CSS:

table.clickRows td > a {
  display: block;
  width: 100%;
  height: 100%;
}

Answer 5

You're much better off trying to make an <a> look like a <tr>.

Browsers will be much more tolerant of you mangling the presentation of an <a> element than overriding such basic operations as shift-clicking a link.

Answer 6

For what its worth, Apple are RED and Bananas are YELLOW. You might not want to squeeze it and color it for the sane users out there.

An anchor tag, <a> exists for what its worth, and so is a table-row tag, <tr>.