Table rows as clickable anchors

Recently a question was posed on StackOverflow.com that sparked my interest. You can head over there to read it yourself. The original poster wanted to know how to make an entire table row (<tr>) clickable, like a link. This is fairly easy if you’re only after the very redimentary link functionality: it only requires you to register a click handler which will change the location to anything you desire.

An example of this:

$('tr').bind('click', function(){
    window.location = 'http://somelocation.com';
    // Or, we can grab the HREF from the first anchor:
    // window.location = $('a:first', this).attr('href');
});

This might be deemed suitable by most but, truth be told, it’s an almost pointless enhancement. The same is true for any attempted link simulations. For example, having a DIV element and making it re-locate the page upon a click. Doing this is pointless because it’s not a real link! Browsers offer a bunch of behavioural enhancements to anchors, for example:

  • Middle-click: Page opens in new tab.
  • CTRL/SHIFT click: Page opens in new window/tab.
  • Right-click options: “open in new window”, “copy link location” etc.
  • Status message is changed to the HREF of the anchor.
  • etc…

It’s impossible to simulate all of the above. Users are left confused and sometimes annoyed when an element doesn’t act like it’s supposed to…

There are no rules that state that table rows or DIV elements cannot be clickable but if you’re going to do so then it’s important to preserve what functionality is expected from anchors. Of course, most users don’t think of them as “anchors”; they’re just links to other pages, but even so, users have a set of unwritten expectations which dictate how websites should behave.

In other words, if you’re going to make an element function like an anchor then it must be an entirely accurate emulation.

So I thought, instead of trying to simulate the expected functionality I could instead simply create an absolutely positioned anchor that moved with the cursor; this anchor would only be activated when the corresponding table row was being hovered. And since it’s a real anchor, all expected functionality is present, including those behavioural enhancement offers by the browser. This is the answer I originally posted on the thread at Stack Overflow.

Then I had another thought; instead of having to update the anchor’s position whenever the document’s mousemove event triggered, I could just keep it statically hovering over the table row; like a blanket.

I decided to create a jQuery plugin utilizing the above technique:

It works on any element that contains a link. The plugin takes one argument; the selector to target the link within the container, which, by default, is ‘a:first’.

Note: If you plan on binding mouseover/mouseout events on the same element that the plugin is running on then make sure to bind both events BEFORE calling the plugin. Also, don’t use mouseenter/mouseleave events – the mouseleave event won’t occur as expected because of the anchor overlay.

Using the plugin is dead simple; say, for example, you have a table with multiple rows; each row has an anchor within the last cell <td>:

$('table#mytable tr').superLink('a:last');

Now every row will seem like one giant anchor to the user!

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!