tableHover
Description:
A jQuery plugin to highlight table rows and columns when hovering over them.
It features different styles for row and column highlighting and fixing the highlight when a user clicks inside a cell.
Files: (last update: 2007-12-17 - v 0.1.4)
- jquery.tablehover.zip (uncompressed: 14kb, minified: 3.1kb, packed: 2.8kb)
License:
The plugin is available under both MIT and GPL licenses (as jQuery itself). This means that you can choose the license that best suits your project, and use it accordingly.
Usage, Examples and available options:
Please take a look at the demo page and the source of the jquery.tablehover.js file.
Changelog:
- v 0.1.4 - 2007-12-17
- fix: clicking on a link or child element inside a cell did not set the clickClass on the rows/columns
- v 0.1.3 - 2007-09-04
- fix: highlighting did not work when the hovered table cell had child elements inside
- v 0.1.2 - 2007-08-13
- fix/change: changed event binding routine, as is got really slow with jquery 1.1.3.1
- change: added new option “ignoreCols”, through which columns can be excluded from the highlighting process
- v 0.1.1 - 2007-06-05
- fix: errors when using the plugin on a table not having a theader or tfoot
The plugin was successfully tested on Firefox 2, Opera 9.10/9.20 and IE 6/IE 7.
lily
July 4th, 2007 at 6:28 am
I am using your plug in , but it can’t work well if i am in document ready .add table hover function.
in document ready :
$.get(”customer-j.php”, {BN_CLUSTER:”"}, function(xml) {
var result=”";var tmpresult=”";
$.each( $(”customer”, xml), function(i, row){
if(i%2==0) {
tmpresult+=”";
}else{
tmpresult+=”";
}
tmpresult += “”+$(”name”, row).text()+
“”+$(”code”, row).text()+
“”+$(”cluster”, row).text()+
“”+$(”dbmaster”, row).text()+
“Modify Remove“;
});
result=result+tmpresult;
$(”#datamin”).append(result);
});
$(”#maintable”).tableHover({colClass: ‘highlight’});
then it can’t work well.
rw
July 4th, 2007 at 8:21 pm
Hi lily,
is the #maintable filled with static data or is it filled dynamically through some ajax-calls?
Do you maybe have an example page I could take a look at?
pytechd
July 23rd, 2007 at 5:41 pm
The plugin works great. However, when given a TABLE element with a THEAD but an empty TBODY, it throws many JS errors. Once the table has rows, the errors disappear. Minor problem, of course
rw
July 25th, 2007 at 4:54 pm
Aw, I’ve never thought of having a table without a body
I’ll fix the errors. Thanks!
Izahg
August 3rd, 2007 at 8:15 pm
When using the click class, cells do not stay highlighted after a click. That was the intention, right?
Izahg
August 4th, 2007 at 7:59 pm
Nevermind the click feature does work. The background color used was just too light for my monitor. But I noticed that the first cell (upper left) stays highlighted by default. How can I change that? Thanks for the great plugin!
rw
August 5th, 2007 at 3:47 pm
pytechd: I tried to recreate your problem with the empty tbody but I don’t get any errors - could you please send me the html markup you used?
Izahg: can you please explain this in more detail? I don’t see any cell staying highlighted by default (in the demo page)
thanks!
Alessandro
August 6th, 2007 at 1:48 pm
It seems that if a bgcolor on single cell is defined, highlight has no effect on it.
I have a table with different bgcolor for some cells…
Thank u anyway, very smart plugin
rw
August 6th, 2007 at 6:32 pm
Thanks!
Bgcolor attributes should be overwritten by stylesheets. Maybe there is a problem with the other styles your’e using?
If you can give me a link to your site, I can take a quick look at it.
Alessandro
August 8th, 2007 at 4:12 pm
How about dimensions table must have?
When I have more than 60 rows in a table with 18 column, highlighting stops work on next rows and the error
appears.
The same error appears even if the number of rows grow up to 30, but in this case highlighting still works.
Same error occur in Firefox too where the problem seems to be generated in jquery-1.1.3.1.js.
Maybe the script is not scalable and works fine only with small tables? Or maybe there’s something more complex underneath?
Thank u!
Alessandro.
pytechd
August 10th, 2007 at 8:20 pm
I upgraded the script and don’t get any errors, so I wouldn’t worry about it. It could have been my markup, too, but it seemed very consistent (throwing errors on empty tables but not on full tables).
rw
August 12th, 2007 at 2:51 pm
Alessandro: I’ve never really tried the plugin with bigger tables, 60 rows and 18 columns doesn’t even sound that big. I’ll try to sort that out.
pytechd: Thanks for clarifying this. I’m glad the problem doens’t occur with the latest version.
rw
August 14th, 2007 at 6:31 pm
Alessandro: That really was a problem with jQuery 1.1.3.1. The event binding got a lot slower, so I had to change this in the plugin (v0.1.2). The page load time should be normal again.
Thanks for reporting the problem!
Alessandro
August 17th, 2007 at 4:53 pm
Great, I’m glad to have been helpfull ^_^
Thank you!
jq1.1.4
August 30th, 2007 at 12:58 am
When you have a table full of links the columns briefly de-highlight when you mouse over the link but then quickly re-highlight. Is there a way to avoid this flicker? Mere annoyance at best — it seems much more noticable with jQuery 1.1.4, perhaps due to speed-ups in JQ itself.
Izahg
August 31st, 2007 at 10:08 pm
When you hover over a hyperlink within a cell, the column and row are no longer highlighted. If you hover over plain text or or within the cell but outside the hyperlink, there’s no problem. Is there a way to make sure they stay highlighted? I tested it with ie7 and firefox2. I hope you can replicate it. Thanks again!
Izahg
September 3rd, 2007 at 9:04 pm
I realized that if the cell contains anything but plain text, the highlight effect won’t work if you hover over the content of that cell. If there’s an image or link (or any other html object) within the cell, and you hover over it, the highlight is gone. Is there a way that could be fixed?
Thank you again for this awesome plugin!
rw
September 4th, 2007 at 6:09 pm
Damn! That was a stupid mistake. It’s hopefully resolved now.
Thank you for reporting this!
Izahg
September 4th, 2007 at 9:03 pm
Thanks for fixing it. It worked like a charm!
Mike
October 31st, 2007 at 9:02 am
Hi
Your plugin does not work in Safari 2.0 (Mac OS X 10.4). Safari 3.0 (Mac OS X 10.5) however does work. Here is a page where I used it:
http://info.hgk.fhz.ch/maccenter_status.html
Do you know about this problem? Will there be a fix?
Besides that, I like your plugin very much. Keep up the good work! Thank you.
Mike
rw
October 31st, 2007 at 7:28 pm
Sorry, but as I don’t have a Mac, there probably won’t be a fix for that. I’ll try to check this on a friends Mac, though.
Thanks for reporting this!
Simon
November 14th, 2007 at 3:32 pm
Hi, I am trying ot use this on a table which uses striping i.e. td class=”row” With the classes already defined on each row it doesn’t do anything, as soon as I remove the classes it works fine. Can this be used with pre-defined classes? How will it know to return the row to the original class?
Otherwise it’s brilliant, thanks
Simon
rw
November 14th, 2007 at 9:29 pm
Hi Simon,
the highlighting class probably doesn’t overwrite the class which does the striping. Please try to give the highlighting class a higher specificity or add !important to the css rule. If that doesn’t work, I can try to take a look at your site.
The plugin only adds and removes it’s own class, it won’t touch all other set classes.
Cheers!
Simon
November 23rd, 2007 at 12:13 pm
Thanks, setting the !important attribute fixed the problem perfectly.
Cheers
Mike
December 10th, 2007 at 11:52 am
Hi
Is there a possibility to exclude rows from hilightning? It would be nice to set a class like
.... Something like “ignoreCols ()” won’t help, because I don’t know the exact row which I am going to exclude. My tables are all database driven.Greetings Mike
Mike
December 10th, 2007 at 11:54 am
Sorry, my code did not show up:
<tr class="noHover">...</tr>Greetings Mike
rw
December 10th, 2007 at 5:40 pm
Mike, this should work:
- set a background-color to your noHover class
- make sure, it has a higher css specificity than the hover class or add !important to the rule
The plugin will still set the hover class to the row, but it should have no effect.
Mike
December 12th, 2007 at 9:57 am
Thanks!
Syl
December 16th, 2007 at 7:52 pm
Hi,
I found that clicking on a link inside a cell doesn’t render the row/css/column highlighted when clickClass option is used.
Can you fix this?
rw
December 17th, 2007 at 8:58 pm
Hi Syl,
thank you!
I’ve fixed the problem. Please take a look at the new version (v0.1.4).
Cloudream
October 5th, 2008 at 9:27 pm
How to apply hover event to new tr elements after tableHover() inited on one table?
$(table1).tableHover(); $(table1).find("tbody").append(""); //something like $(table1).trigger("update.tableHover"); ?Cloudream
October 8th, 2008 at 1:42 pm
Since jQuery 1.2.6 support namespace events. Maybe we can solve it this way(at last lines):
if ( $(this).data("bind.tableHover") ) { $(this).unbind(".tableHover"); } $(this).bind('mouseover.tableHover', over).bind('mouseout.tableHover', out).bind('click.tableHover',click).data("bind.tableHover",true);