jquery: odd/even row elements + hover

Question

hi,

i'm styling a table with this command:

$("tr").filter(":odd").addClass("odd");

works nice. now i'm having a hover function which would show a cursor when i move the cursor over a row.

the problem: on hover-out i want the table row getting back its "odd" class again, in order to keep the 2-colored layout. unfortunately it doesnt work - hovering-out will result in a plain class.

here's my hovering-code:

function hover = function(tr,cod)
{
    if(cod)
    {
     tr.addClass("hover");
    }else{
     if(tr.is(":odd"))
     {
      tr.addClass("odd");
     }else{
      tr.removeClass();
     }
    }
}

anyone can tell me what's wrong?

thx in advance.

Answer 1

I think you want this instead:

function hover = function(tr,cod)
{
    if(cod)
    {
        tr.addClass("hover");
    }else{
        tr.removeClass("hover");
    }
}

Calling removeClass() is removing all the classes. Since nodes can have multiple classes applied it's fine to just add and remove the hover class, whether it's odd or not.

Answer 2

You should use toggleClass() instead of addClass() + removeClass().