jQuery用新数据替换表格行

Posted 2023-03-05

【中文标题】jQuery用新数据替换表格行

【英文标题】：jQuery replace table rows with new data

【发布时间】：2011-07-24 11:07:04

【问题描述】：

我正在尝试用我通过 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  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);
        

【参考方案1】：

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

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

【参考方案2】：

我有一个建议，不要返回数据对象并将其转换为 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>

【讨论】：

好的，我理解一个类似的想法。但随着时间的推移结果的增长，我担心额外的数据会减慢这个过程。我是不是疯了（别笑了）

下载一些表格行并将它们吐出比循环数据并动态创建它们要快，尤其是使用那些计数器和其他东西。这样，负载就在您的服务器上，而不是在用户（可能是石器时代）浏览器上。

【参考方案3】：

不太确定您是否存储表的记录，或者它是实时的并且没有存储在任何地方。

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