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

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

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

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

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

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


jquery css hover alternating
person daveomcd    schedule 30.12.2011    source источник
comment
В twitter bootstrap есть код для этого twitter.github.com/bootstrap/#tables   -  person clyfe    schedule 30.12.2011

Ответы (4)


arrow_upward
3
arrow_downward

Используйте :odd и :even для разных цветов строк. Используйте :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;
}

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

person scessor    schedule 30.12.2011
comment
Вы захотите использовать .addClass, потому что я знаю, что в IE8 !important не переопределяет стили элементов. Обновленная скрипта здесь: jsfiddle.net/H8ukq/2 - person henryaaron; 30.12.2011
comment
Я протестировал свой пример с IE8 и не имел проблем. - person scessor; 30.12.2011
comment
Нет проблем с !important (см. также ссылка) и :hover (см. ссылка) с IE8. - person scessor; 30.12.2011
comment
Это прекрасно работает. Мне просто нужно понять, почему наведение не работает на моей странице, но работает на jsfiddle. Спасибо! :) - person daveomcd; 30.12.2011
comment
Я знаю, что это такое, но это не переопределяет стили элементов. - person henryaaron; 30.12.2011
comment
@ user1090389, что ты имеешь в виду? - person daveomcd; 30.12.2011
comment
Видимо, я ошибся из-за одного из своих прошлых опытов, любой код должен работать... - person henryaaron; 30.12.2011

arrow_upward
1
arrow_downward

Вы должны переместить объявление 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);
    }
);

лучшим подходом было бы использование имен классов:

CSS:

.special-color {
    background: #D2DEE8;
}

JavaScript:

$(".DefaultTable tr").not(".DefaultTable .nohover").hover(
    function () {
        $(this).addClass('special-color');
    },
    function () {
        $(this).removeClass('special-color');
    }
);
person Rob W    schedule 30.12.2011
comment
У меня это не работает в IE... хотя в Chrome работает нормально - person daveomcd; 30.12.2011

arrow_upward
1
arrow_downward

Я использую следующие коды для цвета зебры и при наведении курсора, а также для выбора строки, даже этот код будет работать и при вызове 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");
 });

}
person Rameshwar Chaturvedi    schedule 07.01.2014

arrow_upward
0
arrow_downward

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

.DefaultTable tr td {background-color:transparent}

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

person R G    schedule 30.12.2011