Comments on: Table rows as clickable anchors

By: Tommie Hansen

Tommie Hansen — Sat, 25 Jul 2009 08:25:56 +0000

This effeciently kills any CSS-formatting for tr:hover as the previous user says. It also kills formatting for a:hover within the TR’s which is quite a bad thing.

REDO!

By: james1

james1 — Wed, 27 May 2009 21:09:24 +0000

Nice plugin

By: Marek Stasikowski

Marek Stasikowski — Wed, 27 May 2009 15:31:28 +0000

I’ve come across something developing a project, which will be out surely after IE6 dies.
I use lot’s of stuff like:

tr:hover td {
   background-color: #abc;
}

Unfortunately, this plugin kills the browsers behaviour handled by css
Any ideas?

By: James

James — Mon, 25 May 2009 21:36:28 +0000

@Georg, You’re quite right; this definitely is not suitable for all tables, especially those that contain quite a lot of data. For smaller tables with not-so-interesting data this might be useful though. I guess one of the disadvantages in having a behave like an anchor is that it becomes non-selectable (just like anchors)…

@Mathias Bynens, great idea; just implemented!

@Brian, Thank you for the fix Brian; I’ve just added it to the plugin source!

@Jeferson, Unfortunately, like you said, the issues I pointed out are not considered. The plugin you linked to is effectively the same as doing this:

$(elem).click(function(){
    window.location = $('a:first', this).attr('href');
});

By: Jeferson Koslowski

Jeferson Koslowski — Mon, 25 May 2009 20:59:12 +0000

Very nice and clever solution.

There is already a jQuery plugin that does that, but it doesn’t solve the issues with anchors that u pointed out. Here it is: http://newism.com.au/blog/post/58/bigtarget-js-increasing-the-size-of-clickable-targets/

Cheers.

By: Brian Fisher

Brian Fisher — Mon, 25 May 2009 20:23:42 +0000

I was able to fix my issue by transferring the tr mouseover events to the $targetLink, similar to what you did for the mouseout events. This only shows the active highlight if the computer has time to show the $targetLink, but I think it works better than leaving the lingering highlighted rows. I added the following code:

var mouseovers = $(this).data('events') && $(this).data('events').mouseover;
 
if (mouseovers) {
	$.each(mouseovers, function(i, fn){
		$targetLink.mouseover(function(e){
			fn.call($container, e);
		});
	});
	delete $(this).data('events').mouseover;
}
 
$container.mouseover(function(){
	$targetLink.show();
})

By: Mathias Bynens

Mathias Bynens — Mon, 25 May 2009 19:08:45 +0000

Awesome plugin, James. I will definitely be using this in future projects. You might want to use it on this site as well, for example in p.video, as seen on your jQuery plugin detector post.

By: Brian Fisher

Brian Fisher — Mon, 25 May 2009 19:07:07 +0000

Great plug-in! I’m having a small problem, on slower computers when I move the mouse rapidly across the table, rows remain highlighted even after the mouse is no longer hovering over the row.

By: Georg Tavonius

Georg Tavonius — Mon, 25 May 2009 18:41:17 +0000

That is in deed a really nice idea. But there is one issue that really would bother me if would encounter such an enhanced table. (More then right or shift click capabilities.)

Table data is in most cases data, that shows some interesting numbers, or other data you probably would like to use in other documents. So while hovering an empty a link beneath the mouse cursor, you are not able to select the text to copy it. Maybe you will find a solution for this too.

Cheers,
me