CODEWITHSUNDEEP
jquerycolorshoverrow
ACP
ACP

Reputation: 35268

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

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...

Upvotes: 1

Views: 2044

Answers (5)

Rameshwar Chaturvedi
Rameshwar Chaturvedi

Reputation: 95

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

}

Upvotes: 1

udayasankar
udayasankar

Reputation: 11

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

Upvotes: 1

Mario Menger
Mario Menger

Reputation: 5902

<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>

Upvotes: 1

Fermin
Fermin

Reputation: 36081

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.

Upvotes: 0

cletus
cletus

Reputation: 625057

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.

Upvotes: 8

Related Questions