在 c# 中的每个 ajax 调用中删除带有 gif 图像的行下方的行

Question

不幸的是，它在每次 ajax 调用时都会向 table 添加行：

如果我删除下面的代码，它可以很好地用于多个 open/collapse 功能

if ($('#tableOrderDetail_' + index + ' tr tr').length <= 1)

长度保持 1 一次，在第二次调用时长度大于 1，因此它不会进入 if condition

<tr>
    <td id="lding<%#Container.ItemIndex + 1 %>" style="display: none;">
        <p>Loading....</p>
        <img id="imgld" src="../img/loading.gif" alt="loading.." height="75px;" width="100px;" />
    </td>
</tr>

与 table 称为

 $('#tableOrderDetail_' + index + ' tr')

但是使用下面的代码，它会在每次 ajax 调用我的 table 名称

时继续添加行

 $('#tableOrderDetail_' + index + ' tr tr')

这是我的Js代码：

 function DisplayPrdWeightGrd(index, OrderId, isAdmin) {
        $('#lding' + index).show();
        var Admin = isAdmin.toLowerCase();
        if ($('#img_' + index).attr("class") == "splashy-arrow_state_grey_expanded") {
            $('#img_' + index).attr("class", "splashy-arrow_state_grey_left");
        } else {
            $('#img_' + index).attr("class", "splashy-arrow_state_grey_expanded");

            var Orderid = OrderId;

            $.ajax({
                type: "POST",
                url: "../handlers/DisplayOrderDetail.ashx?OrderId=" + Orderid + "&tk=" + $.now(),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data) {


                    if ($('#tableOrderDetail_' + index + ' tr tr').length <= 1) {
                        $.each(data, function(i, v) {
                            setDataOnRow(index, v, i);
                        });
                    }        
                },
                failure: function(response) {
                    alert("fail");
                },
                error: function(response) {
                    alert(response);
                }
            });
        }    
        function setDataOnRow(idx, v, i) {
            $('#tableOrderDetail_' + idx + ' tr:last').after('<tr>' +
                '<td width="25%" >' + (i + 1) + '</td>' +
                '<td width="25%" class="center">' + v.ProductName + '</td>' +
                '<td width="12%" class="center">' + v.NoOfCarton + '</td>' +
                '<td width="12%" class="center">' + v.ProductQuantity + '</td>' +
                '<td width="12%" class="center">' + v.OriginalPrice + '</td>' +
                '<td width="12%" class="center">' + v.OrderPrice + '</td>' +
                '<td width="10%" class="center">' + v.Discount + '</td>' +
                '<td width="12%" class="center">' + v.TotalPrice + '</td></tr>');
            $('#lding' + index).hide();
        }

        $('#trPwd_' + index).toggle("slow");
    }

HTML代码：

<asp:Repeater ID="rpt_us" runat="server" OnItemDataBound="rpt_us_ItemDataBound" OnItemCommand="rpt_us_ItemCommand">
    <HeaderTemplate>
        <table class="table table-striped table-bordered dTableR">
            <thead>
                <tr>
                    <th width="7%">Detail</th>
                </tr>
            </thead>
            <tbody>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td class="center" style="cursor: pointer">
                <span onclick="DisplayPrdWeightGrd('<%#Container.ItemIndex + 1 %>','<%# Eval(" OrderId ")%>','<%= Convert.ToBoolean(Utility.IsAdmin()) %>');">
                         <img id="img_<%#Container.ItemIndex + 1 %>" class="splashy-arrow_state_grey_left" />
                     </span>
            </td>
        </tr>
        <tr style="display: none" id="trPwd_<%# Convert.ToInt32(Container.ItemIndex + 1) %>">
            <td colspan="10" style="horizontal-align: center; padding-bottom: 15px">
                <div style="padding-left: 5px; padding-bottom: 3px"> <b>Order Details </b></div>
                <table id="tableOrderDetail_<%#Container.ItemIndex + 1 %>" class="table-striped table-bordered" style="align: center; width: 100%;">
                    <thead>
                        <tr>
                            <th width="5%">Sr. No. </th>
                            <th width="35%">Product Name </th>
                        </tr>
                        <tr>
                            <td id="lding<%#Container.ItemIndex + 1 %>" style="display: none;">
                                <p>Loading....</p>
                                <img id="imgld" src="../img/loading.gif" alt="loading.." height="75px;" width="100px;" />
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody>
        </table>
    </FooterTemplate>
</asp:Repeater>

我尝试了调试器并检查了条件

 if ($('#tableOrderDetail_' + index + ' tr tr').length <= 1)

其长度每次都保持为 0，因此每次进入 if 条件并生成行

Answer 1

在这里，您的 table 中有两行，这就是您的 if 条件无法正常工作的原因。

你必须改变：

$('#tableOrderDetail_' + index + ' tr tr')

往这边走。

if ($('#tableOrderDetail_' + index).children().children().length <= 2) {
                $.each(data, function (i, v) {
                    setDataOnRow(index, v, i);
                  });                        
      }

希望对您有所帮助！

在 c# 中的每个 ajax 调用中删除带有 gif 图像的行下方的行

Remove row below the row with gif image on every ajax call in c#

javascript

asp.net-ajax