Clickable Table Rows with jQuery

Originally posted on May 31, 2011 Filed Under:

Posted By:

Here at The 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.

<table>
	<thead>
		<tr>
			<th>Col 1</th>
			<th>Col 2</th>
			<th>Col 3</th>
			<th>Col 4</th>
			<th>Actions</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td><a href="#">Edit</a> <a href="#">Delete</a></td>
		</tr>
		<tr class="even">
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td><a href="#">Edit</a> <a href="#">Delete</a></td>
		</tr>
		<tr>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td><a href="#">Edit</a> <a href="#">Delete</a></td>
		</tr>
		<tr class="even">
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td><a href="#">Edit</a> <a href="#">Delete</a></td>
		</tr>
	</tbody>
</table>

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:

<table>
	<thead>
		<tr>
			<th>Col 1</th>
			<th>Col 2</th>
			<th>Col 3</th>
			<th>Col 4</th>
			<th>Actions</th>
		</tr>
	</thead>
	<tbody>
		<tr data-href="http://google.com">
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td><a href="#">Edit</a> <a href="#">Delete</a></td>
		</tr>
		<tr class="even" data-href="http://google.com">
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td><a href="#">Edit</a> <a href="#">Delete</a></td>
		</tr>
		<tr data-href="http://google.com">
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td><a href="#">Edit</a> <a href="#">Delete</a></td>
		</tr>
		<tr class="even" data-href="http://google.com">
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td><a href="#">Edit</a> <a href="#">Delete</a></td>
		</tr>
	</tbody>
</table>

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

jQuery( function($) {
	$('tbody tr[data-href]').addClass('clickable').click( function() {
		window.location = $(this).attr('data-href');
	});
});

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.

jQuery( function($) {
	$('tbody tr[data-href]').addClass('clickable').click( function() {
		window.location = $(this).attr('data-href');
	}).find('a').hover( function() {
		$(this).parents('tr').unbind('click');
	}, function() {
		$(this).parents('tr').click( function() {
			window.location = $(this).attr('data-href');
		});
	});
});

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!

Posted by:

Matt currently lives and works a short car ride away from Los Angeles. He loves working in both design and development; being able to make something look great, and then turn it into a living-breathing thing. This is what makes him such a versatile team member. In his free time, he tries to lower his ever-expanding Netflix queue and ride his bike around town.

10 Comments (Leave One)

  • FJ on June 10, 2011 Reply

    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’);

    • Matt Felten on June 10, 2011 Reply

      @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 on July 6, 2011 Reply

    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.

  • verlager on October 7, 2011 Reply

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

    test

    • Matt Felten on October 7, 2011 Reply

      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.

  • Francesco on October 15, 2011 Reply

    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?

  • Francesco on October 15, 2011 Reply

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

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

    and it seems ok…

  • Christian Miguez on February 6, 2013 Reply

    Gracias, me ha sido de gran ayuda

  • chris on August 30, 2013 Reply

    Sweet dudes, this works like a charm :)

  • Hoogesh Dawoodarry on October 28, 2013 Reply

    Great! Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *