jQuery动态添加表格行而不闪烁

我有一个页面，每5秒从服务器获取新的数据与jQuery ajax并将其附加到表。
一切工作正常，除了从一个讨厌的问题.every追加动作导致表闪烁。
我正在寻找一种方法来平滑一些事情，并使该操作对用户更加“眼睛友好”。
HTML：jQuery动态添加表格行而不闪烁

<table id="myTable"> 
    <thead> 
     <tr> 
     <th>COL A</th> 
     <th>COL B</th> 
     <th>COL C</th>          
     </tr> 
    </thead> 
    <tbody> 

    </tbody> 
    </table>

的jQuery：

setInterval(function() { 
    $('#myTable tbody').empty(); 
    $.ajax({ 
    type: "POST", 
    url: "/MySite/WebMethods/AjaxTestMethods.aspx/GetActivityTable", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function (data) { 
    var d = data.d; 
    for (var i = 0; i < d.length; i++) { 
    $('#myTable tbody').append('<tr><td>' + d[i].DATA1 + '</td><td>' + d[i].DATA2 +'</td><td>' + d[i].DATA3 + '</td><tr>'); 
    } 
    } 
    }); 
}, 5000);

来源

2012-01-23 baba-dev

也许你可以使用加载栏？：）具有淡化效果。 – Oyeme

有关于如何编写惯用，快速jQuery代码的丰富文章。请阅读。这里是一个简要介绍此问题：

http://www.slideshare.net/AddyOsmani/jquery-proven-performance-tips-tricks

对于这个特定的问题，你需要做两件事情：

缓存您TBODY查找
结合您的追加

可能你在这里要做的是这样的：

var rows = ""; 
for (var i = 0; i < d.length; i++) { 
    rows += '<tr><td>' + d[i].DATA1 + '</td><td>' + d[i].DATA2 +'</td><td>' + d[i].DATA3 + '</td><tr>'; 
} 

$('#myTable tbody').append(rows);

分离也是有帮助的，但考虑到你一次有数据，我不认为它会有很大的帮助。但是如果没有足够的帮助，你也可以尝试一下。注意：不要忘记为HTML实体转义您的Ajax数据。

来源

2012-01-23 09:16:55 Jason

的问题是，你清空表。你只应该看看新的行。也许你可以在你的请求中传递一个“id”，并且只能得到后面添加的内容。

来源

2012-01-23 08:27:13 netadictos

考虑使用'loading ...'图片或消息。 see this one这将使它更“眼睛友好”

来源

2012-01-23 08:30:48 robasta

jQuery动态添加表格行而不闪烁

回答

相关问题