Попытка заставить фон таблицы зависания цвета для работы со строками зебры

Question

Я готов сделать лучший метод для IE8 +

Мне нужны чередующиеся цвета строк (#fff, #efefef) для моей таблицы, а также эффект парения, поэтому фон меняется на#D2DEE8.Я хотел бы просто использовать :hover и :nth-child(odd) в CSS, но я обнаружил, что эти методы не работают с IE8.

Я использовал jQuery для наведения, но он устраняет чередующиеся цвета (которые в данный момент я использую для создания nth-child (нечетные)) всякий раз, когда я нахожу и затем покидаю эту строку.

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

Если кто-нибудь может помочь мне разобраться в этом ИЛИ предоставить более простой / лучший способ выполнения парящих или чередующихся строк для IE8, я был бы признателен!Спасибо!

Answer 1

Используйте : нечетное и : четное для разных цветов строк. Используйте : hover для эффекта наведения. Тестирование с IE8.

JavaScript:

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

CSS:

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

Также посмотрите этот пример .

Answer 2

Я использую следующие коды для цвета зебры и наведения мыши, а также для выбора строки, даже этот код будет работать и при вызове Ajax ... попробуйте

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 3

Вы должны переместить декларацию color в общую область:

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 лучше подход будет использовать имена классов:

CSS:

.special-color {
    background: #D2DEE8;
}

JavaScript:

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

Answer 4

Когда я пытался сделать подобное, я обнаружил, что td не имеет прозрачного фона в IE.

.DefaultTable tr td {background-color:transparent}

и сделайте это как пример сессора