Click Entire Row (preserving middle click and ctrl+click)

Question

I have an HTML table with a link in the first column. I want to allow the user to click anywhere in the row to activate that link. At the same time, I would like to preserve the middle click and ctrl+click functionality of opening a new tab/window. Here is an example of the table:

<table id="row_link"> 
  <tbody> 
    <tr>
      <td><a href="link1.html">link</a></td> 
      <td>info 1</td> 
    </tr>       
    <tr>
      <td><a href="link2.html">link</a></td> 
      <td>info 2</td> 
    </tr>       
  </tbody> 
</table> 

Using jQuery I can allow the user to left click anywhere in a row:

$("table#row_link tbody tr").click(function () {
    window.location = $(this).find("a:first").attr("href");
});

This of course disables the standard middle click and ctrl+click functionality of opening a new tab. Is there a better way to allow users to click on the entire row while preserving the standard middle click and ctrl+clcik behavior?

Answer 1

Unfortunately there is no way to simulate a link and all associated behaviour in every browser. Therefore, the only way to achieve what you want is to have a link that follows the cursor around the <tr> element; this link would be invisible so, to the user, it looks like they're clicking on the <tr> but they're actually clicking on a hidden link. Using this method, the middle-button, ctrl+click and any other behaviours are left intact!

Here's a DEMO: http://jsbin.com/ufugo

And here's the code:

$("table tr").each(function(){

    var $link = $('a:first', this).clone(true),
        dim = {
            x: [
                $(this).offset().left,
                $(this).offset().left + $(this).outerWidth()
            ],
            y: [
                $(this).offset().top,
                $(this).offset().top + $(this).outerHeight()
            ]
        }

    $link
        .click(function(){
            $(this).blur();
        })
        .css({
            position: 'absolute',
            display: 'none',
            // Opacity:0  means it's invisible
            opacity: 0
        })
        .appendTo('body');

    $(this).mouseover(function(){
        $link.show();
    });

    $(document).mousemove(function(e){
        var y = e.pageY,
            x = e.pageX;
        // Check to see if cursor is outside of <tr>
        // If it is then hide the cloned link (display:none;)
        if (x < dim.x[0] || x > dim.x[1] || y < dim.y[0] || y > dim.y[1]) {  
            return $link.hide();
        }
        $link.css({
            top: e.pageY - 5,
            left: e.pageX - 5
        })
    });

});

EDIT:

I created a jQuery plugin using a slightly better aproach than above: http://james.padolsey.com/javascript/table-rows-as-clickable-anchors/

Answer 2

EDIT

This is simple problem that has a simple solution. I don't see a need for nasty hacks that might break on some browsers or take processing time. Especially because there is a neat and easy CSS solution.

First here is a demo

Inspired by @Nick solution for a very similar issue, I'm proposing a simple css+jquery solution.

First, here is the mini-plugin I wrote. The plugin will wrap every cells with a link:

jQuery.fn.linker = function(selector) {
    $(this).each(function() {
        var href = $(selector, this).attr('href');
        if (href) {
            var link = $('<a href="' + $(selector, this).attr('href') + '"></a>').css({
                'text-decoration': 'none',
                'display': 'block',
                'padding': '0px',
                'color': $(this).css('color')
            })
            $(this).children()
                   .css('padding', '0')
                   .wrapInner(link);
        }
    });
};

And here is a usage example:

$('table.collection tr').linker('a:first');

And All the CSS you need:

table.collection {
    border-collapse:collapse;
}

It's as simple as that.

---

You can use the event object to check the mouse click type. This article is discussing a similar issue.

Anyway, here is how to do it:

$("table#row_link tbody tr").click(function () {

    if((!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1)){
        if (!e.ctrlKey) {
            // Left mouse button was clicked without ctrl
            window.location = $(this).find("a:first").attr("href");
        }
    }
});

Answer 3

I would attack this from the HTML/css side. This used to be a common problem when most sites did all layout in tables.

First make the contents of all table cells into links. If you don't want them to look like links you can use CSS to remove the underline from the 'non link' cells. But they will be links, which is semantically what you want anyway.

Next you want to make the link expand to fill the entire cell. StackOverflow already knows the answer to this:

td a { display: block; width: 100%; height: 100%; line-height: 100%; }

With a typical table with no spaces between the cells the entire row will be clickable. And since this relies on no tricks or browser specific hacks it should work everywhere.