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用新數據替換錶行

回答

相關問題