Hi
I'm trying to make a table who's columns and rows highlight on hover (I realise there are jquery plugins out there that will do this, but I'm trying to learn, so thought I'd have a stab at doing it for myself.)
Here's what I've got so far:
$('th:not(.features), td:not(.features)').hover(highlight);
function highlight(){
$('th.highlightCol, td.highlightCol').removeClass('highlightCol');
var col = $(this).attr('class');
$('.' + col).addClass('highlightCol');
};
$('tr').hover(highlightRowOn, highlightRowOff);
function highlightRowOn(){
$(this).children('td:not(.highlightCol)').addClass('highlightRow');
};
function highlightRowOff(){
$(this).children('td:not(.highlightCol)').removeClass('highlightRow');
};
This works fine apart from one problem:
Each 'td' has a class specific to it's column (package1, package2, package3, package4). It is this that gets passed to the variable (col) to add the class 'highlightCol' to a column when one of its 'td's are hovered on.
However, If you move the cursor to a new column along a highlighted row, the 'td' you land on has two classes (highlightedRow and package* ). These both get passed to the variable and as a result the new column does not receive the correct class to highlight.
Is there a way for me to target just the 'package* ' class and pass that to the variable while ignoring the 'highlightedRow' class?
I hope that's not too jumbled for someone to make sense of and many thanks for any help offered.
