[jQuery] Again on tablesorter and row hovering
Hi all
I've changed a table to use tablesorter (+ its pager) instead of
server side
sorting+paging, so far so good.
The last bit that is missing to make it fully functional is the
classic
"hovering highlights" effect.
I've been reading here and there and I've found no precooked solution,
nor I
have been able to produce one...
Basically I've been trying to assign an hover() event to the TDs of my
table
body, using something like this:
$.tablesorter.addWidget({
id: "hover",
format: function(table) {
$("tbody tr", table).each(function() {
$(this).hover(
function () {
var $rows = $(this).children();
$rows.each(function(){
$(this).addClass("hover");
})
},
function () {
var $rows = $(this).children();
$rows.each(function(){
$(this).removeClass("hover");
})
}
);
})
}
});
Now, the event works ok, and the TD is added with the "hover" class.
But the CSS class that prevails is the tablesorter one:
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
How do I get rid of this precedence problem?
Do I have to test manually if the td I'm processing is of "odd" class,
and
in that case remove it?
Beside this, I'm not sure if this solution starts to be heavyweighted,
considering that I have
tables of 5000 or so rows...
Does anyone of you any suggestion? Am I missing something obvious?
Many thanks, especially for the whole lot of good work you do out
there!
Francesco