Чередующиеся цвета строк с помощью jquery

Ответ 1

Попробуйте следующее:

$("tr:even").css("background-color", "#eeeeee");
$("tr:odd").css("background-color", "#ffffff");

Ответ 2

Вы просто не хотите использовать CSS для кросс-браузера (т.е. IE)? Если это так, вы можете сохранить стиль в CSS и просто использовать jQuery для установки класса.

Например:

<style>
    /* tr:nth-child(even) */
    tr.even { background-color: white; }
    /* tr:nth-child(odd) */
    tr.odd { background-color: black; }
</style>
<script>
    $(function(){
        // Apply to each table individually and make sure nothing is doubleclassed
        // if you run this multiples of times.
        $('table').each(function() {
            $('tr:odd',  this).addClass('odd').removeClass('even');
            $('tr:even', this).addClass('even').removeClass('odd');
        });
    });
</script>

Ответ 3

Вы можете выбрать элементы tr из таблицы, а css принимает функцию как параметр, который вернет значение, основанное на некоторых критериях, которые вы решите. В этом случае вы можете проверить индекс для равномерности.

$("#table tr").css("background-color", function(index) {
    return index%2==0?"blue":"red";
});

JSFiddle: http://jsfiddle.net/n3Zny/

Ответ 4

jQuery использует Sizzle Seletor Engine, что классно, потому что он использует тот же синтаксис, что и CSS. Таким образом, вы используете тот же селектор, что и CSS, но затем используйте функцию jQuery .css() для изменения элемента CSS:

$('#table_id').find('tr:even').css({'background-color':'red'})
              .end().find('tr:odd').css({'background-color':'blue'});

Этот пример кода выбирает таблицу, которую вы хотите изменить, затем выбирает все четные дочерние элементы (tr) и меняет их цвет фона, затем использует .end() для возврата к предыдущему выбору всей таблицы и выбирает нечетные строки, чтобы изменить их CSS.

Ответ 5

Я использовал следующий код для изменения цвета альтернативной строки. Я взял ссылку из http://www.tutsway.com/set-alternate-row-colors-in-jQuery.php

window.jQuery(document).ready(function(){
       window.jQuery("tr:odd" ).css("background-color","#fbcff5" );
       window.jQuery("tr:even").css("background-color","#bbbbff");
    });

Ответ 6

Для тех, кто хочет пропустить скрытые строки (или другой атрибут, скажем class="struck"):

<style>
tr.struck{background-color:#633;color:white;}
tr.eee{background-color:#EEE;color:#000;}
tr.fff{background-color:#FFF;color:#000;}
</style>
function doZebra(){
     var tTrCnt=0;
     $("##tblData tbody tr").each(function(){
         if($(this).css("display")!="none" && !$(this).hasClass("struck")){
             tTrCnt++;
             if(tTrCnt % 2) $(this).removeClass().addClass("eee");
             else  $(this).removeClass().addClass("fff");
         }
     });
}