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.