jquery, равный PHP ‹?=++$r%2?'нечетный':'четный'?› для чередующихся строк таблицы?

Я делаю это в PHP: ++$r%2?'odd':'even', чтобы применить полосатые строки..

<tr class="<?=++$r%2?'odd':'even'?>"><td>...</td></tr>

Но когда я получаю набор записей через $.ajax-запрос, я возвращаю такой результат:

$('#table_selected tbody').empty();  //  empty the table
$.ajax({  //  fetch new data and insert into new rows
    ...
    success: function(data){
        $.each(data, function(i, array){
            $('#table_selected tbody').append('<tr><td>'+array['name']+'</td></tr>');
        });
    }
});

Что я хотел бы сделать, так это добавить класс odd/even к элементу <tr> в каждой второй строке - как я делаю в php.

Есть ли аналогичный способ добиться этого в js/jqyery?

Я прочитал этот ответ: нечетный-четный-класс">Как мне добавить класс нечетных/четных только для строк таблицы, у которых еще нет класса нечетных/четных?, и я думаю, что это начало того, чего я хочу достичь, но не уверен, как работать с решением в моем коде:

$("table tbody tr:nth-child(odd)").addClass("odd");
$("table tbody tr:nth-child(even)").addClass("even");

javascript arrays jquery tablerow
person ThomasK    schedule 10.02.2014    source источник
comment
$("#table_selected tbody tr:nth-child(odd)").addClass("odd"); $("#table_selected tbody tr:nth-child(even)").addClass("even"); после каждого цикла   -  person Arun P Johny    schedule 10.02.2014
comment
Для чего используются классы odd и even? Если это чисто стиль, то, вероятно, для него есть решение только для CSS, которое устранит необходимость в PHP и JavaScript.   -  person Anthony Grist    schedule 10.02.2014
comment
Это можно сделать только с помощью CSS, но он не работает в IE8 и ниже. например в CSS введите tr:nth-child(нечетный) {background-color:#333;}   -  person MarkP    schedule 10.02.2014
comment
Это просто для применения разных стилей для каждой строки ... И это было так просто, что я смущен ... Я думал в неправильном направлении ... Спасибо @Arun   -  person ThomasK    schedule 10.02.2014

Ответы (1)


arrow_upward
2
arrow_downward

Если вам действительно нужно просто чередовать нечетные/четные строки таблиц, не могли бы вы просто добавить это в свой css для страницы:

#table_selected tbody tr:nth-child(odd){ background-color: green; }
#table_selected tbody tr:nth-child(even){ background-color: yellow; }

Если вам нужны классы, как предлагает Арун П. Джони в комментариях, вы обновите свой скрипт следующим образом:

$('#table_selected tbody').empty();  //  empty the table
$.ajax({  //  fetch new data and insert into new rows
    ...
    success: function(data){
        $.each(data, function(i, array){
            $('#table_selected tbody').append('<tr><td>'+array['name']+'</td></tr>');
        });

        $("#table_selected tbody tr:nth-child(odd)").addClass("odd");
        $("#table_selected tbody tr:nth-child(even)").addClass("even");
    }
});

или вот так (более аналогично вашему php):

$('#table_selected tbody').empty();  //  empty the table
$.ajax({  //  fetch new data and insert into new rows
    ...
    success: function(data){
        $.each(data, function(i, array){
            $('#table_selected tbody').append(
                $('<tr><td>' + array['name'] + '</td></tr>')
                    .addClass(i % 2 ? 'odd' : 'even')
            );
        });
    }
});
person rusmus    schedule 10.02.2014
comment
Второе предоставленное вами решение добавляет класс только к самому table tbody. Но вместо этого я использовал (i % 2 ? 'odd' : 'even') вот так: <tr class="'+(i%2?'even':'odd')+'">. - person ThomasK; 10.02.2014