Question

我有一个页面，使用jQuery AJAX Post定期更新表格。表格中的每一行都有2个部分，第一个主要行，我有数据，还有一个图标，点击后会显示隐藏在当前行下方的细节部分。最初，当页面加载时，所有行都被上传并且工作完全正常，但是当使用ajax请求进行刷新并且新行出现时，此图标效果会被破坏。新行或者默认显示详细信息部分，或者隐藏新行到达时打开的所有其他行详细信息部分。

$(document).ready(function() {
    $.post(
        "/xxx/xxx/xxx/xxx/setupPage",
        function(data){
            //add rows one after another
            $("#report tr:first").after(data);

            //hide all detail rows  
            $("#report tr:not(.odd)").hide();
            $("#report tr:first-child").show();

            //if clicked on icon show detail part  
            $("#report tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
        }
    );

    var refreshId = setInterval(function() {
        $.post(
            "/xxx/xxx/xxxx/xxxx/checkOrder",
            {  bId: $("#bId").val() },
            function(data){
                //add new data as 1st row of table
                $("#report tr:first").after(data);

                //show detail part
                $("#report tr.odd").click(function(){
                    $(this).next("tr").toggle();
                    $(this).find(".arrow").toggleClass("up");
                });
            }
        );
    }, 9000);

    $.ajaxSetup({ cache: false });
});

ajax调用函数返回完整的表/新行HTML。有人可以告诉我在checkOrder()电话中可以应用哪些修正来正确添加新行吗？我希望保持当前的显示/隐藏状态，并且新行应该隐藏详细信息。

以下是表格的HTML

//this is fixed part, below is dynamic part which will be added by ajax call
    <tbody>
    <tr>
    <th>Status</th>
    <th>Order Type#</th>
    <th width="10%">Order Time</th>
    <th>Order No.</th>
    <th width="10%">Delivery Time</th>
    <th>User Name</th>
    <th>Contact Number</th>
    <th>Order Details</th>
    </tr>
//dynamic part start
    <tr class="odd">
    <td align="center">p</td>
    <td align="center">d</td>
    <td>2012-02-14 16:15</td>
    <td>21402252</td>
    <td>2012-02-14 16:45</td>
    <td>Mac</td>
    <td>111111111</td>
    <td>
    <div class="arrow"/>
    </td>
    </tr>
//dynamic part end

AJAX表更新导致格式问题

0 个答案: