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 preser

Answer 1

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 2

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 3

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 4

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