Trying to get table row hovering background color to work with zebra striping rows

Question

I'm willing to do the best method for IE8+

I'm wanting alternating row colors (#fff, #efefef) for my table and also have a hovering effect so the background changes to #D2DEE8. I would love to just use :hover and :nth-child(odd) in CSS but I've found these methods dont work with IE8.

I was using jQuery for the hovering but it eliminates the alternating colors (which at the moment I'm using nth-child(odd) to create) whenever I hover and then leave that row.

    $(".DefaultTable tr").not(".DefaultTable .nohover").hover(
        function () {
            var color = $(this).css('background')
            $(this).css('background', '#D2DEE8');
        },
        function () {
            $(this).css('background', color);
        }
    );

If anyone can help me figure this out OR provide a easier/better way of doing either, the hovering or alternating rows for IE8, I would appreciate it! Thanks!

Answer 1

Use :odd and :even for different row colors. Use :hover for the hover effect. Testet with IE8.

javascript:

$(".DefaultTable tr:odd").css('background-color', '#EFEFEF');
$(".DefaultTable tr:even").css('background-color', '#FFFFFF');

css:

.DefaultTable tr:hover {
    background-color: #D2DEE8 !important;
}

Also see this example.

Answer 2

You have to move the color declaration to the common scope:

var color; //At this point, the `color` variable can be read by both functions
$(".DefaultTable tr").not(".DefaultTable .nohover").hover(
    function () {
        color = $(this).css('background')
        $(this).css('background', '#D2DEE8');
    },
    function () {
        $(this).css('background', color);
    }
);

A better approach would be using classnames:

CSS:

.special-color {
    background: #D2DEE8;
}

JavaScript:

$(".DefaultTable tr").not(".DefaultTable .nohover").hover(
    function () {
        $(this).addClass('special-color');
    },
    function () {
        $(this).removeClass('special-color');
    }
);

Answer 3

I use following codes for zebra color and mouseover as well row selection even this code will work on Ajax calling also...try it

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 4

When I try to do similar thing, I found out that td has no transparent background in IE.

.DefaultTable tr td {background-color:transparent}

and do it like scessor's example