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

- Steve Fischer

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>

- Dunhamzzz

---

好的，我理解并且喜欢这个想法。但随着时间的推移，结果越来越多，我担心额外的数据会减慢进程。我是不是有点疯了（别回答那个哈哈）？ - Steve Fischer

下载几个表行并将它们输出比循环遍历数据并即时创建它们更快，特别是在使用计数器等内容时。这样负载就在您的服务器上而不是用户（可能是石器时代的）浏览器上。 - Dunhamzzz

Answer 2

也许问题不在你发布的代码部分。例如，在当前代码中，你总是使用 += 操作符与 newPropertyRows 变量一起使用。在每个 ajax 调用之前，你是否将其重置为空字符串？

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

- Oleg

Answer 3

不太确定您是将表格记录存储在何处，还是实时获取而无需存储。

但如果已经存储，您可以尝试在服务器端生成整个表格或仅行的HTML代码，然后用从服务器接收到的数据替换容器/表格内容。

- Johann du Toit