Check if Table tr has class then remove and add new class on Hover event

Question

Hi,

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.

:D

Answer 1

You could just leave the class "even" and "odd" and just add/remove the class "rowhover" on hover (so e.g. a highlighted TR would have the classes "even" and "rowhover"). Set the background-color (or whatever it is you use for highlighting the row) in "rowhover" to be "!important" in your CSS to override "even" and "odd".

That way you don't have to care what class the TR had before and simplyfy your code a lot, you'd just call "add rowhover" on hover and remove it on mouseout.

Answer 2

Are you using regular,"pure" javascript? Seems to me as if you would use some javascript-library (e.g. mootools).

Answer 3

First of all, try chaining your events.

$(this).removeClass('even').addClass('rowhover');

Secondly, why remove those classes? If you simply add the class and then override it in CSS by combining class names:

.even { background:black; }
.even.rowhover { background:blue; }

Answer 4

This line of your code seems to be wrong:

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

You are quoting this keyword, try this:

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

Answer 5

(As an alternative) instead of using jQuery for this functionality, just use the built in css functionality

instead of using a rowhover class in your css use

tr:hover
    {
        ...styles here
    }

Answer 6

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");
});