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

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 = $('').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");
        }
    }
});