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!

11 Comments

  1. FJ on | 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 | 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.

  2. Matthew on | 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.

  3. verlager on | 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 | 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.

  4. Francesco on | 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?

  5. Francesco on | 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…

  6. Christian Miguez on | Reply

    Gracias, me ha sido de gran ayuda

  7. chris on | Reply

    Sweet dudes, this works like a charm :)

  8. Hoogesh Dawoodarry on | Reply

    Great! Thank you.

  9. joe on | Reply

    Can you fix the dmeo link?

Leave a comment

We'd love to work on your next project

Get in touch