jquery删除表中的第一行答案

【问题标题】：jquery remove first row in tablejquery删除表中的第一行
【发布时间】：2014-04-12 21:01:21
【问题描述】：

我需要有一个很好的过渡，我删除第一行并将新项目附加到表中。

    $.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 时有效。请帮忙。谢谢

【问题讨论】：

您如何/在哪里调用此方法？您没有对服务器返回的data 进行任何测试，而是直接访问data[0]。是否保证每次服务器发送一个包含至少一个元素的 JSON 集合？

标签： asp.net-mvc-3 jquery

【解决方案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 中删除第一行
创建一个新元素，并使用隐藏它的样式
将新元素附加到表格中
淡入新元素

（注意：可以将这些步骤组合在一起）

【讨论】：

australis：有没有办法在第一行被删除后为其余行添加一个向上滑动过渡以添加更好的效果？谢谢
Shane：我可能弄错了，但我认为滑动一行的唯一方法是在行中嵌入一个 div，然后滑动它。你有这方面的运气吗？如果没有，我会尝试挖掘一个例子。

【解决方案2】：

试试这个。

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

因为

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

会在第一次 JSON 调用时隐藏第一个元素。现在您再次尝试淡出不可见的第一个元素。所以你可以使用:visible 过滤器来达到预期的效果。

或者，如果你想从 DOM 中删除元素，试试这个

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：