jQuery 用新数据替换表行

Question

我正在尝试用通过 ajax 获得的新数据替换表格。第一次工作得很好，但随后行被添加而不是被替换，所以我最终得到了重复的行。

这是我的一些代码:

            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);
        }

Answer 1

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

顺便说一下，在我看来，你没有在开头调用 $("#featured_listing_tbody").children( 'tr:not(:first)' ).remove() success 处理程序的原因是您稍后使用 $("#featured_listing_tbody").html(newPropertyRows); 这将覆盖整个表格主体。