Question

I’m trying to highlight table rows on mouse hover. The each row (tr) has a class either “even” or “odd” already. So, to highlight the row on mouse hover, I need to remove the CSS class “even” or”odd” from the row first. Please take a lot at my script:

$('tr').hover(function() {

  if ($('this').hasClass('even')) {
    $(this).removeClass('even');
    $(this).addClass('rowhover');
  }

  else {
    $(this).removeClass('odd');
    $(this).addClass('rowhover');
  }
},
function() {
  $(this).removeClass('rowhover');
});

But, it’s not working. Can you point me the mistake? Thank you.

Update 1:

I used this toggleClass liket this

$("tr").hover(function() {
$(this).toggleClass("rowhover");
});

Then I used the firebug to inspect the element, the tr got class like this:

<tr class="even rowhover"> where it should be <tr class="rowhover">

Same result if I use sth like this:

$('tr').hover(function() {

    $(this).addClass('rowhover');
    },
 function() {
    $(this).removeClass('rowhover');        
});

My CSS for rowhover class

.rowhover {background:green !important;} 

Update 2:

I tried the suggestion from Justin Johnson :

$('tr').hover(function() {
    $(this).removeClass('even odd').addClass('rowhover');
        },
    function() {
     $(this).removeClass('rowhover').addClass(this.rowIndex % 2 == 0 ? "even" : "odd");
  });

I inspected the element with FireBug, here’s the result:

//Notice the space in the class=" rowhover" when mouse hover
     <tr class=" rowhover">

 //Notice the space in the class=" even", class=" odd" when mouse out
 <tr class=" even"> or <tr class=" odd">

Update 3 : It’s working!

I followed a post at jQuery – Demonstrations and Examples of Tablesorter Plug-in but I needed to add !important to override the previous style like this :

tr.overRow td { background-color:#FFFF99 !important; border :2px; }

I added that rule to the bottom of style sheet of tablesorter, then used the following script to manipulate it:

// Adds "over" class to rows on mouseover
$(".tablesorter tr").mouseover(function() { $(this).addClass("overRow"); });
// Removes "over" class from rows on mouseout
$(".tablesorter tr").mouseout(function() { $(this).removeClass("overRow"); }); 

Now, everything works as it is intended to. Thank you all for suggestion. Sorry for not mentioning at the first place that I’m using jQuery tablesorter plugin, and I just want to highlight the row on hover event.

😀

Answer 1

Change

if ($('this').hasClass('even')) {

to

if ($(this).hasClass('even')) {

remove the quotes around this. Also, you need to reset the original class state and you can chain your functions:

$('tr').hover(function() {
    $(this).removeClass('even odd').addClass('rowhover');
},
function() {
    $(this).removeClass('rowhover').addClass(this.rowIndex % 2 == 0 ? "even" : "odd");
});