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.

Answer 4

You want this:

$('table#row_link tbody tr').mousedown( function(e){
    if(e.ctrlKey || (!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 4)){
        //middle mouse button or ctrl+click
    } else {
        //normal left click
    }
});

This is tested in FF3.0.10, Chrome 1.0 and IE6. I use the mousedown event because neither firefox or IE passes the middle mouse button click to a .click(fn) event.

Answer 5

You could grab the event and look at it's event code. But there is no real way to know what a browser's behavior for those events.

Answer 6

Here's something that should work: Instead of using window.location, us .click() to emulate a click on the first inside the element. Also, use a conditional to check for CTRL +Click.

Should look like this:

$("table#row_link tbody tr").click(function (e) {
    if(e.ctrlKey) { 
        // Run Ctl+Click Code Here
    } else { 
        $(this).children('a').eq(0).click(); 
    }
}

Hope this helps!

Dave Romero

Answer 7

You can make a link and let it floting around in your tr, biding to mouveover event, update href and position

create one pixel link

<table id="row_link">....</table>
<a id="onepixel" style="position:absolute;z-index:1000;width:1px;height:1px;"></a>

update href and position on mouse over

$("#row_link tr").mouseover(
   function(event){
      //update href
      $("#onepixel").attr("href",$(this).find("a:first").attr("href"));
      //update position, just move to current mouse position
      $("#onepixel").css("top",event.pageY).css("left",event.pageX);
   }
);

Answer 8

Try putting the a around the td and then apply a display:block CSS element to the td.

That should make the entire area of the td clickable with all buttons as a "normal" link.

An example is probably better:

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

A similar approach has worked in the past for me, although it was not exactly for table elements. Untested with tables so try it.

Answer 9

I think the biggerlink plugin will do what you ask for. Here's the

• article , and
• demo too.

Answer 10

you need to remove the < tbody > tag

and just use the 'href' attribute to get the link destination and dont to select the anchor < a > tag too because thats contains the href attribute.

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

     window.location = $(this).attr("href");

});

or simply make the link open a new tab.

i hope that helps you.