JQuery удалить первую строку в таблице

Question

Мне нужен хороший переход, когда я удаляю первую строку и добавляю в таблицу новый элемент.

    $.getJSON('/Home/GetRecentPosts/', { count:1 }, function(data) {
      $('#recentPosts tr:first').fadeOut(2000);
      $('#recentPosts').append($('<tr><td>'+data[0].SchoolName+'</td></tr>').hide().fadeIn(2000));
    });

это работает в первый раз, когда я выполняю только getJson. Пожалуйста помоги. спасибо

Answer 1

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

$.getJSON(
    '/Home/GetRecentPosts/',
    { count:1 },
      removeFirstRowAndAppendNewItem(data)
      );

function removeFirstRowAndAppendNewItem(data)
{
    console.log("in callback"); // to confirm we have reached here
    $('#recentPosts tr:first').fadeOut(2000, function() {
        $('#recentPosts tr:first').remove();
        newRow = $('<tr><td>'+data[0].SchoolName+'</td></tr>').hide();
        $('#recentPosts').append(newRow)
        newRow.fadeIn(2000));
    });
}

В основном:

• Исчезает первый ряд
• Удалить первый ряд из DOM
• Создайте новый элемент со стилем, который его скрывает
• Добавить новый элемент в таблицу
• Fade в новом элементе

(Примечание: возможно объединить эти шаги вместе)

Answer 2

Попробуйте это.

$('#recentPosts tr:visible:first').fadeOut(2000);

Поскольку

$('#recentPosts tr:first').fadeOut(2000);

скрыл бы первый элемент при первом вызове JSON.Теперь вы снова пытаетесь исчезнуть из невидимого первого элемента.Таким образом, вы можете использовать :visible фильтр для достижения ожидаемого результата.

В качестве альтернативы, если вы хотите удалить элемент из DOM, попробуйте это

$('#recentPosts tr:first').fadeOut(2000, function(){
    $(this).remove();
});

Answer 3

Попробуйте это:

$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......
});