Question

问题：

当我尝试使用AJAX / JQUERY更新表行时，行会更新，但不会替换旧行，而是显示在表的顶部。见附图：

The Problem

守则

以下是调用更新和刷新的函数：

function ajaxRefresh(sid, dbitem, newinfo)
    {   
        // sid -> spiceID
        // dbitem -> image, fill, etc
        // newinfo -> what to update
        // refreshDiv -> image/spice


        var loadUrl = "update.php"; // 
        var ajax_load = "<img src='images/load.gif' alt='loading...' />"; // loading gif/image
        var toBeReloaded = "#siditemrow" + sid;

        alert("Sid: " + sid + " dbitem: " + dbitem + " newinfo: " + newinfo);


        $(toBeReloaded).html(ajax_load);

        $.get(
            loadUrl,
            {sid: sid,
             dbitem: dbitem,
             newinfo: newinfo},
            function(responseText){
                $(toBeReloaded).html(responseText);
            },
            "html"
        );
    }

这是我的表架构的一个例子，假设只有一行：

<table cellspacing="0">
            <thead>
                <tr>
                    <th class="image">Image</th>
                    <th class="spice">Spice</th>
                    <th class="cost">Cost</th>
                    <th class="notes">Notes</th>
                    <th class="coupons">Coupons</th>
                    <th class="control">Chef Controls</th>
                </tr>
            </thead>
            <tbody>

            <!-- Ajax Refresh of entire row-->
            <div id="siditemrow#">
                <tr class="alt"> OR <tr>
                    <td class="image" align="center">
                        <!-- Ajax Refresh of fill update -->
                        <div id="siditemfill#">
                            <div class="outergreen">
                                <div class="imagegreen">                                 
                                    <!-- Ajax Refresh of image update -->
                                    <div id="siditemimage#">
                                        <img class="itemimage" src="resources/images/imagesource.png"/>
                                    </div>
                                    <!-- Ajax Refresh of image update -->                                  
                                </div>
                            </div>
                        </div>
                        <!-- Ajax Refresh of fill update -->                      
                    </td>
                    <td class="spice">spicename</td>
                    <td class="cost">~$#.##</td>
                    <td class="notes">description</td>
                    <td class="coupons">link & store</td>
                    <td class="control">
                        <!-- Ajax Refresh of fill update -->
                        <div id="siditemchefcontrols<?php print $row['sid']; ?>">
                            <img class="more" src="images/uparrow.png" onClick="itemFill('up','currentquantity','id#')" />
                            <img class="less" src="images/downarrow.png" onClick="itemFill('down','currentquantity','id#')" />
                            <img class="addimage" src="images/photoupload.png" onClick="openImageUpload('id#')" />
                            <img class="settings" src="images/settings.png" />
                        </div>
                        <!-- Ajax Refresh of fill update -->
                    </td>
                </tr>
            </div>
            <!-- Ajax Refresh of row update -->


            </tbody>
        </table>

由放置在表格上方的php脚本创建的代码与

之间的代码完全匹配

<div id="siditemrow#">

它正在关闭

</div>

问题：

如果表格行没有出现在应该替换的内容之上，如何更新？（我做错了什么？）
对于用户启动的更新，JQuery和Ajax最有效（最快的响应时间）方式是什么？（CODE和Approach）
增加AJAX / JQuery效率/时间的其他任何提示/技巧？

任何和所有帮助表示赞赏！谢谢！

修改应该提到的是，表结构的代码已经替换了PHP部分以使阅读更容易。每行都有由PHP生成的div和内容的唯一标识符。

Answer 1

为什么您要在div

中的tbody中显示数据

在tbody中，应该只有table rows

因此，您可以将数据附加到tbody代替div，

 $.get(
        loadUrl,
        {sid: sid,
         dbitem: dbitem,
         newinfo: newinfo},
        function(responseText){
            $('tbody').append(responseText);//use tbody as selector & append() here
            // or you can use prepend() as your needs
        },
        "html"
    );

同样对performance我发现了一些文章

使用Jquery和Ajax更新表行

1 个答案: