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

我有一个建议，而不是返回一个数据对象并在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>

Answer 2

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

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

Answer 3

不确定您是否存储了该表的记录，或者它是实时的而不是存储在任何地方。

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

jQuery用新数据替换表行

3 个答案: