jQuery用新数据替换表行

我试图用通过ajax获取的新数据替换表。第一次工作得很好，但是行被添加而不是被替换，所以我最终得到重复的行。jQuery用新数据替换表行

下面是我的一些代码：

  success: function(data){    
      $("#featured_listing_tbody").children('tr:not(:first)').remove(); 
      counter= 1; 
      $.each(data, function(i, val){ 
         newPropertyRows += '<tr>'; 
           $.each(val, function(key, info){ 
            var skip = false; 
             if(key == "Id") {           
               Id = info; 
               newPropertyRows += ''; 
               skip = true; 
             } 
             if(key == "thumbs"){ 
               info = '<img width="100px" src=uploads/properties/'+Id+'/thumbs/'+info+' />'; 
               newPropertyRows += '<td class="col'+counter+'"><a href="/featured.php?prop='+Id+'">'+info+'</a></td>'; 
               skip = true; 
               counter++;  
             } 
             if(skip == false){ 
               newPropertyRows += '<td class="col'+counter+'"><a href="/featured.php?prop='+Id+'">'+info+'</a></td>';      
               counter++;  
             } 

             info = ''; 
           });      
         newPropertyRows += '</tr>';       
      });      
       $("#featured_listing_tbody").html(newPropertyRows); 
     }

来源

2011-03-28 Steve Fischer

也许问题不在于你发布的代码的一部分。例如，在当前代码中，您始终使用+=操作，并使用newPropertyRows变量。 您是否在每次ajax调用之前将它重置为空字符串？

顺便说一下，在我看来，您不要在success处理程序的开始处调用$("#featured_listing_tbody").children('tr:not(:first)').remove()，因为您稍后将使用$("#featured_listing_tbody").html(newPropertyRows);，这将覆盖整个表格的正文。

来源

2011-03-28 13:30:11 Oleg

不太清楚，如果你存储的记录表或它的实时性和不存储。

但是，如果它的存储，你可以尝试生成服务器端的整个表或只是行的HTML，然后简单地替换从服务器接收到的数据容器/表的内容。

来源

2011-03-28 12:42:13

我有一个建议，而不是返回一个数据对象，并在JavaScript中将其转换为HTML，只是将数据作为所需的表行返回。因为您已经为页面生成了它们，所以应该有逻辑/模板来轻松地再次执行它。

要替换数据，我会在数据行中包含一个<tbody>标记，并在您的ajax成功函数中替换其内容 - 而不是执行复杂的选择器以省略第一个表格行，我假设您是列标题。

$("#featured_listing tbody").html(data); //Replace contents of <tbody> tag

而且表：

<table> 
    <thead><tr>....row headers...</tr></thead> 
    <tbody>...data rows...</tbody> 
</table>

来源

2011-03-28 12:42:40 Dunhamzzz

好吧，我明白一个想法。但随着时间的推移，结果越来越多，恐怕额外的数据会减慢这个过程。我疯了（不要那么大声笑） – 2011-03-28 12:53:06

下载一些表格行并将它们吐出来比在数据中循环并快速创建它们更快，特别是使用这些计数器和其他东西。这种方式的负载是在您的服务器上，而不是在用户（可能石器时代）的浏览器。 – Dunhamzzz 2011-03-28 12:55:44

jQuery用新数据替换表行

回答

相关问题