Jquery alternate row color doesn't seem to work after hover function

Question

I use the following jquery statements,

$(".resultsdiv:odd").css("background-color", "#fff");
$(".resultsdiv:even").css("background-color", "#EFF1F1");
$('.resultsdiv').hover(function() {
      $(this).css('background-color', '#f4f2f2');
   },
   function() {
      $(this).css('background-color', '#fff');
});

Alternate seems to be ok initially but after hover over a div element it doesn't work ... Any suggestion...

Answer 1

My suggestion is don't manipulate style directly, use classes. So CSS:

.resultsdiv { background-color: #FFF; }
.resultseven { background-color: #EFF1f1; }
.resultshover { background-color: #F4F2F2; }

with:

$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
  $(this).addClass("resultshover");
}, function() {
  $(this).removeClass("resultshover");
});

The problem with a call like:

$(this).css("background", "#FFF");

is that you have no way of knowing how to reset the element to its original state because its original colour may have also been set as inline style, as is the case in your code sample. Classes just make this kind of problem much much easier.

Answer 2

<style type="text/css">
  .resultsdiv.odd { background-color: #fff }
  .resultsdiv.even { background-color: #EFF1F1 }
  .resultsdiv.highlight { background-color: #f4f2f2 }
</style>

<script type="text/javascript">
$(function(){
    $(".resultsdiv:odd").addClass('odd');
    $(".resultsdiv:even").addClass('even');
    $('.resultsdiv').hover(function() {
          $(this).addClass('highlight');
       },
       function() {
          $(this).removeClass('highlight');
    });
});
</script>

Answer 3

I use the following code. The table is fetched using ajax. After ajaxing is successful, I trigger tableready() function. inside that I have the following code, which works perfectly with table sorter with zebra widget.

 $("#ResultsDisplay").tablesorter({ widgets: ["zebra"] });
    $("#ResultsDisplay").trigger("update");
    $(".tablesorter tr").mouseover(function(){ $(this).addClass("over");});
    $(".tablesorter tr").mouseout(function () { $(this).removeClass("over"); });

    $('.tablesorter tr').click(function () {
        if ($(this).hasClass('colorMe')){
            $(this).removeClass('colorMe');
        }
        else {
            $(this).closest('table').find('tr').removeClass('colorMe');
            $(this).addClass('colorMe');
        }
    });

Answer 4

i used this codes for showing alternate color, mouse over and selected row color highlight.it will work if your are generating table row by ajax then just call this script it will work.

function rowHighlight(){            
    $(function(){
    $("#facCodes tr:odd").addClass('oddRow');
    $("#facCodes tr:even").addClass('evenEven');
    $('#facCodes tr').hover(function() {
          $(this).addClass('hover');
       },
       function() {
          $(this).removeClass('hover');
    });

});
 $('#facCodes tr').click(function(event){
    $(this).addClass("click").siblings().removeClass("click");
 });

}

Answer 5

When you mouse out you set the color of the row to #fff, this will look fine for odd rows but not even.

On mouseout you'll need to check if it's odd or even and set the color accordingly.