Here at Phuse, we do a lot of design and front-end development for web apps. Tables have a bit of a bad reputation in the web world but there are a lot of times where using a table makes sense according to the data being presented. One of the most common approaches to tabular data is having a column on either side of actions the user can take to that specific row; Edit, Delete, etc. A really quick way to improve the user experience is by making each table row clickable.

There are a few methods that you can use but the one we use here is a jQuery approach. Here’s some quick mark-up to start it off.


Now to enable the clicking, without having to add an anchor tag to every table cell, you just add the URL to take the user as a data-href attribute on the row. Your new markup will look like this:


That’s it for the HTML aspect. Now to add the javascript:

The above code assigns the row with a class so that you can restyle the row if needed, and then as long as anywhere on the row is clicked, the user gets redirected to the new page.

There is a small problem with what we have though. If there are anchors in the markup, like in the Actions column, the user gets redirected even when they are clicked on. For that we add a little more javascript.

This unsets the clickability when the user hovers over a link, so that they can click on it and the intended effect happens, and then resets it when the user hovers off of the link.

Here’s a quick demo showing this in action. Now get to clicking!

  • FJ

    Very nice. but two questions.

    1. why you don’t use “delegate”? If you add new TRs via ajax it will not work with your code.

    2. why you use “attr”? there is a “data function” in jQuery:
    $(this).data(‘href’); instead of $(this).attr(‘data-href’);

    • @FJ: Thanks for the comments. You’re right, .delegate() would be better if you’re using AJAX. For the demo though, we weren’t using AJAX so there was no need to delegate it. The .attr() and .data() functions basically work the same way, although .data() handles objects a lot better. Other then being slightly smaller, either works in this case.

  • Matthew

    Would anyone be willing to convert this great little function into a AJAX capable function. I am not all that versed in jQuery or Javascript for that matter. Thanks in advance for any help.

  • Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.89)()

  • I like this, but I can’t see how to make a pop-up window from this direct approach nor from a class:


    • This code does not create popups. It only makes table rows click through. You’ll need to either create the popup code yourself or hook in a plugin like Fancybox.

  • Nice, but is there a way to set a target attribute?
    It now opens the link in “_top”, while I’d need it to point to an iframe… is it possible?

  • I’ve replaced
    window.location = $(this).data(‘href’);

    $(window.parent.document).find(‘#iframe-id’).attr(‘src’, $(this).data(‘href’));

    and it seems ok…

  • Gracias, me ha sido de gran ayuda

  • chris

    Sweet dudes, this works like a charm 🙂

  • Great! Thank you.

  • joe

    Can you fix the dmeo link?

    • Hey Joe! Sorry about the (lengthy) delay. The demo is now fixed!

  • mia

    the link doesnt work. please fix it. thank you

Discover and implement your big idea with our product team

Get a Quote