Simulate behavior of element

Question

I have something like:

<tr><td><a href="...">text</a></td>...</tr>

I need to enable user to click on entire table row to navigate on that link.

Now I use the following code:

$(function () {
    $('tr').each(function () {
        var tr = $(this);
        if (tr.hasClass('no-row-link')) return;
        var links = $('a', tr);
        if (links.length != 1) return;
        tr.addClass('row-link').click(rowLinkClick);
    });

    function rowLinkClick() {
        var tr = $(this);
        var links = $('a', tr);
        if (links.length != 1) return;
        window.location = links.attr('href');
    }
});

but the problem is, this behaviour is not working very nice. User can command-click on normal link to open page in new tab, but he can't here. User can right-click on normal link to view link context menu, but he can't here.

The only way I can do what I want is to iterate throw table cells (th/td) and wrap their contents on links. And then make those links behave with display:block. This isn't very elegant solution. Is there any other solutions for that?

Tim Vermaelen · Accepted Answer · 2014-12-26T06:44:41.263

1

How about using a data-attribute on your rows?

<tr data-href="yourlinkhere"><!--whatever comes here--></tr>

Then in jQuery:

$('.table-selector').on('click', 'tr', function(){
    var href = $(this).data('href');

    if (href){
        window.location = href;
    }
});

It certainly looks more elegant, don't you think? ^^

UPDATE: Ah, the right click behavior ... kk

tr { position: relative; }
tr a { position: absolute; display: block; width: 100%; height: 30px/*or something*/ }

CSS solution, not sure about the flexibility of your table but if possible ... here's a DEMO of how I would try it.

edited Dec 26 '14 at 06:44

answered Dec 26 '14 at 06:17

Tim Vermaelen

6,869
1
25
39

Looks like elegance is subjective ... care to comment on the downvotes? – Tim Vermaelen Dec 26 '14 at 06:22
Indeed this is a more elegant way to simulate the linking, but does not answer the actual question of how to simulate the right-click behaviour of showing a context menu that allows users to open the link in a new tab. – irruputuncu Dec 26 '14 at 06:24
Btw: You can create a custom context menu for your simulated a tags using the 'contextmenu' event and some custom markup (see [here](http://stackoverflow.com/questions/4495626/making-custom-right-click-context-menus-for-my-web-app)) in which you can add a `` link. However, as this needs a lot of work and the new tab functionality is only one of the many options of the default context menu I would say the cleanest method is still to wrap the cells in `` tags and use CSS to style them properly. – irruputuncu Dec 26 '14 at 06:39
wrapping cells in a tags doesn't sound "great" imho – Tim Vermaelen Dec 26 '14 at 06:41
As you do not want to have an a tag in the cell but want the whole cell to be a link I think its semantically ok. In the end I would't mind though, but from experience feel that the styling to get the whole cell clickable is much simpler when it is wrapped. – irruputuncu Dec 27 '14 at 07:34
Imho opinion that's the whole bottleneck. It's not semantically ok at all. Then better go for a simulated `div` structure which acts as a table by setting the proper `display` in css. – Tim Vermaelen Dec 27 '14 at 08:14
I decided to run a little JavaScript snippet which surrounds every `` content with `` tag and styles this `` tag do it grows to entire `` area. – vbezhenar Feb 22 '15 at 10:32

JLRishe · Answer 2 · 2014-12-26T06:56:17.600

You can check the e.ctrlKey property and either use window.navigate or window.open accordingly:

$(function () {
    function rowLinkClick(e) {
        var href = $(this).find('a').attr('href');
        if (href) {
            (e.ctrlKey ? window.open : window.navigate)(href);
        }
    }

    $('tr')
        .not('.no-row-link')
        .has('a')
        .addClass('row-link')
        .click(rowLinkClick);
});

And you can use CSS to show a link-like mouse cursor:

.row-link {
    cursor: pointer;
}

http://jsfiddle.net/zmr6whjh/2/

I think having a right-click on the row show the context menu for the link might be a bit much. I'm not sure there's a sensible way to do that.

Simulate behavior of element

2 Answers2