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.
