Question

我有一个tbody表

<tbody id="box"> </tbody>

我使用jquery在此tbody中动态追加元素。

$("#loading").show();
$.ajax({
    type: "POST",
    url: "showlistForm",
    async: true,
    data: {
        "next": selectId,
        "limit": limit,
        "skuValue": map,
        "pageNo": pageNo,
    },
    success: function(response) {
        if(response.status == null) {
            $("#box").empty();
            var a = response.result;
            $.each(a, function(i, e) {
                var rowData = '';
                rowData = '<td ><input type="text" id="stockistId' + i + '" value="' + (i + 1) + '" isVal="' + e.stockistId + '"  style="background-color: transparent;border: 0px solid;min-width:10px;   max-width:20px;font-size: 12px;" /></td>' + '<td ><input type="text"  value="' + e.salesStockistName + '"  style="background-color: transparent;border: 0px solid;font-size: 12px;width:100%;" /></td>' + '<td ><input type="text"  value="' + e.salesStockistCode + '"  style="background-color: transparent;border: 0px solid;font-size: 12px;width:100%;" /></td>' + '<td class="box" id="stockID_' + i + '" ></td>' + '<td><input type="text" readonly  id="sfaStockistCode' + i + '" value="' + e.sfaStockistCode + '" class="inputSFACode"/></td>' + '<td ><input type="text" id="sfaStockistId' + i + '" readonly value="' + e.sfaStockistId + '" class="inputSFAId" /></td>';
                $('<tr></tr>').empty().append(rowData).appendTo('#box');
                $('#stockID_' + i).empty().append($($("#stockistId").html()).val(e.sfaStockistName).attr("id", 'stockistBoxId' + i)); // most time consuming operation  
            }); // end foreach
            $("#loading").hide();
        }
    }
})

当我有10或25行时，我的浏览器没有响应1或2秒，而我的#loading图像也没有响应。我该怎么办？

我试过调试这个方法。最耗时的方案是for each循环特别是选择框（#stockID），它需要时间来追加元素。

Jquery动态追加表中的问题

0 个答案: