Изменить порядок альтернативных цветов

#jquery

Вопрос:

У меня есть таблица с чередующимися цветными строками.

 $("#contTbl tr:even").addClass("altBgr");

Затем у меня есть функция, которая выполняет некоторую транзакцию, и после публикации AJAX она удаляет строку.

 $(".clickMe").click(function() {
        var trID = $(this).closest("tr").attr("id");
        $.ajax({
            url: "ajax.php",
            type: "POST",
            data: { 
                contID: trID
            },
            success: function(data){
                $("#" trID).remove();
            }
        });
    });

Проблема, с которой я сталкиваюсь, заключается в том, что когда я удаляю строку, цвет других строк становится неправильным… Есть ли способ как-то обновить его при удалении?

Ответ №1:

Как насчет удаления class по щелчку и добавления его обратно при успешном извлечении?

 $(".clickMe").click(function() {
    var trID = $(this).closest("tr").attr("id");
    $.ajax({
        url: "ajax.php",
        type: "POST",
        data: { 
            contID: trID
        },
        success: function(data){
            $("#" trID).remove();
            $("#contTbl tr:even").removeClass("altBgr");  
            $("#contTbl tr:even").addClass("altBgr");
        }
    });
});

Отредактировано: согласно моему собственному комментарию

Вы можете попробовать поместить как removeClass(), так и addClass() в success: и посмотреть, устраняет ли это мерцание

1. Вы можете попробовать поместить как removeClass(), так и addClass() в success: и посмотреть, устраняет ли это мерцание @santa

2. Бинго. Перемещено как в функцию успеха, так и в мерцание исчезло.

Ответ №2:

Вы можете поместить его в функцию и вызвать ее снова (не забудьте удалить классы, прежде чем добавлять их снова).

Или используйте CSS для раскрашивания :nth-child …

 tr:nth-child(even) td { 
    background: #f03;
}

…имейте в виду, < IE 9 не будет играть хорошо.

1. Я попытался поместить его в функцию, но по какой-то причине все строки становятся одного цвета при удалении строки…

2. Я так надеялся на IE9 : (

3. @santa: IE9 сделает это, меньше, чем IE9, не будет.

Ответ №3:

Вы можете создать функцию, подобную этой:

 function set_odd_even(){
    alert($("table tr"));
    $.each($("table tr"), function(index, value){
        alert(value);
        $(value).removeClass('even');
        if(index % 2){
            $(value).addClass('even');
        }
    });
}

А затем вызовите его в своем событии успеха:

 success: function(data){
    $("#" trID).remove();
    set_odd_even();
}