1

问题：

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

问题

编码

这是调用更新和刷新的函数：

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>

问题：

  1. 如何更新表格行而不使其出现在它应该替换的内容之上？（我究竟做错了什么？）
  2. 对于用户发起的更新，使用 JQuery 和 Ajax 的最有效（最快的响应时间）方法是什么？（代码和方法）
  3. 提高 AJAX/JQuery 效率/时间的任何其他提示/技巧？

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

编辑： 可能应该提到表结构的代码已替换 PHP 部分以使阅读更容易。每行都有其 div 和 PHP 生成的内容的唯一标识符。

4

1 回答 1

4

为什么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我发现了一些文章

于 2013-07-02T05:17:34.573 回答