javascript - 使用 jQuery .append() 后刷新表

Question

以下代码获取一个 JSON 对象，然后将其内容输出到一个 <table> 中。 .我第一次这样做时，我的 JSON 内容就很好。但是，当我刷新时，刷新的数据会卡在我的表格底部。如何刷新数据以仅显示新数据？我尝试使用 .remove()但是有一个明显的删除然后刷新数据。

    $(function() {
        $('#ReportedIssue').change(function() {
            //$('.data').remove()
            $.getJSON('/CurReport/GetUpdatedTableResults', function(json) {
                for (var i = 0; i < json.GetDocumentResults.length; i++) {
                    $('#DocumentInfoTable').append(
                        "<tr class='data'>" +
                        "<td>" + json.GetDocumentResults[i].Document.DocumentId + "</td>" +
                        "<td>" + json.GetDocumentResults[i].Document.LanguageCode + "</td>" +
                        "<td>" + json.GetDocumentResults[i].ReportedIssue + "</td>" +
                        "<td>" + json.GetDocumentResults[i].PageNumber + "</td>" +
                        "</tr>"
                    );
                };
            });
        });
    });

谢谢，

亚伦

Answer 1

按如下方式构建 HTML 会更有效率(当然，也可以解决您遇到的问题):

$(function() {
    $('#ReportedIssue').change(function() {
        //$('.data').remove()
        $.getJSON('/CurReport/GetUpdatedTableResults', function(json) {
            var str = '';
            for (var i = 0; i < json.GetDocumentResults.length; i++) {
                str += "<tr class='data'>" +
                    "<td>" + json.GetDocumentResults[i].Document.DocumentId + "</td>" +
                    "<td>" + json.GetDocumentResults[i].Document.LanguageCode + "</td>" +
                    "<td>" + json.GetDocumentResults[i].ReportedIssue + "</td>" +
                    "<td>" + json.GetDocumentResults[i].PageNumber + "</td>" +
                    "</tr>"
            };

            $('#DocumentInfoTable').html(str);
        });
    });
});