Javascript 重新加载模态表将附加到现有表并使表加倍

我有一个模式，显示表中项目（日期等）的信息。当我点击一个项目时，它会打开一个较小的模式，我可以在其中更新项目日期，然后通过Web服务更新到数据库。然后我想重新加载数据以显示更新的ETA。我发现这样做的方法是回忆我的模态函数的开放函数。但是当我这样做的时候，模态重新加载，表现在翻了一倍。因此，它可能会在不清除数据的情况下附加到现有表中。如何清除内容并用更新的数据重新加载？最好不关闭和重新打开模式。这是我的密码

首先是保存更改并关闭小模式的功能

    $('#btnSaveETAChange').click(function () {
    var dt_eta = document.getElementById('<%=EtaDate.ClientID%>').value;
    var no_item = document.getElementById('<%=ItemNo.ClientID%>').value;
    var no_document = document.getElementById('<%=NoPo.ClientID%>').value;
    var no_line = document.getElementById('<%=LineNo.ClientID%>').value;
    var no_project = document.getElementById('<%=ProjectNo.ClientID%>').value;

    UpdateEta(no_item, dt_eta, no_document, no_line)
    $('#modalUpdateETA').modal('hide');
    $('#modalUpdateETA').on('hidden.bs.modal', function () {
        $('body').removeClass('modal-open');
        OpenModaleShortage(no_project);
    });
});

$（'btnsavetachange'）。单击（函数（）{
var dt_eta=document.getElementById（“”）.value；
var no_item=document.getElementById（“”）.value；
var no_document=document.getElementById（“”）.value；
var no_line=document.getElementById（“”）.value；
var no_project=document.getElementById（“”）.value；
更新数据（无项目、dt预计、无文档、无行）
$（'modalupdateta'）.modal（'hide'）；
$on（'hidden.bs.modal'，function（）{
$（'body'）.removeClass（'modal-open'）；
OpenModaleShortage（无需项目）；
});
});

这是加载主模态的函数

    function OpenModaleShortage(ProjectNumber) {
    $("#Shortage_body tr").remove();

    $.ajax(
        {
            type: "POST",
            url: '<%=ResolveUrl("~/MTL/SEPTOR/wsMTL.asmx/GetProjectOutstandingItems") %>',
            contentType: "application/json; charset=utf-8",
            data: "{ 'ProjectNumber': '" + ProjectNumber + "'}",
            dataType: "xml",
            success: function (data) {          
                var rowMaterial = "<tr>"
                    + "<th style='text-align:center; font-size:16px'>Item No</th>"
                    + "<th style='text-align:left; font-size:16px'>Description</th>"
                    + "<th style='text-align:center; font-size:16px'>Shortage</th>"
                    + "<th style='text-align:center; font-size:16px'></th>"
                    + "<th style='text-align:center; font-size:16px'>ETA</th>"
                    + "</tr>";

                $("#Shortage tbody").append(rowMaterial);

                $(data).find('SHORTAGE').each(function (i, productionRow) {
                    try {
                        rowMaterial = "<tr>"
                            + "<td id='no_po' style='display: none; '>" + $(productionRow).find('PO').text() + "</td> "
                            + "<td id='no_line' style='display: none; '>" + $(productionRow).find('LineNO').text() + "</td> "
                            + "<td id='no_item' style='text-align:center; font-size:14px'>" + $(productionRow).find('ItemNo').text() + "</td> "
                            + "<td id='no_project' style='text-align:center; font-size:14px'>" + $(productionRow).find('ProjectNo').text()+ "</td> "
                            + "<td style='text-align:left; font-size:14px'>" + $(productionRow).find('Description').text() + "</td> "
                            + "<td style='text-align:center; font-size:14px'>" + parseInt($(productionRow).find("ProjectShortage").text()) + "</td> "
                            + "<td style='text-align:center; font-size:14px' data-toggle='modal'><div><i style='vertical-align: center;' class='fa fa-calendar'></i></div></td> "
                            + "<td id='dt_eta' style='text-align:center; font-size:14px'>" + $(productionRow).find('ETA1').text().slice(0, 10).trim().replace('-', '.').replace('-', '.') + "</td>"
                            + "</tr>";

                        $("#Shortage tbody").append(rowMaterial);
                    }
                    catch (err) {
                        alert(err.message);
                    }
                });

                $('#addShortage').modal('show');
            },
            failure: function (errMsg) {
                alert(errMsg);
            }
        }
    );
};

函数OpenModealShortage（项目编号）{
$（“#短缺#车身tr”）.remove（）；
$.ajax(
{
类型：“POST”，
url:“”，
contentType:“应用程序/json；字符集=utf-8”，
数据：“{'ProjectNumber'：'”+ProjectNumber+“}”，
数据类型：“xml”，
成功：函数（数据）{
var rowmeterial=“”
+“项目编号”
+“说明”
+“短缺”
+ ""
+“预计到达时间”
+ "";
$（“#短缺主体”）。追加（行材料）；
$（数据）。查找（'短缺'）。每个（功能（i，productionRow）{
试一试{
rowMaterial=“”
+“”+$（productionRow）.find（'PO'）.text（）+“”
+“”+$（productionRow.find（'LineNO'）。text（）+“”
+“”+$（productionRow.find（'ItemNo'）。text（）+“”
+“”+$（productionRow.find（'ProjectNo'）。text（）+“”
+“”+$（productionRow）.find（'Description'）.text（）+“”
+“”+parseInt（$（productionRow）.find（“ProjectShorth”）.text（））+“”
+ " "
+“+$（productionRow）.find（'ETA1'）.text（）.slice（0,10）.trim（）.replace（'-'，'）.replace（'-'，'））+”
+ "";
$（“#短缺主体”）。追加（行材料）；
}
捕捉（错误）{
警报（错误消息）；
}
});
$（'#addshower'）.modal（'show'）；
},
失败：函数（errMsg）{
警报（errMsg）；
}
}
);
};

事实证明，这很容易。您需要使用jQuery 在将任何数据粘贴到id-tbody之前，只需清空该div。然后，当您在中附加新数据时，它应该取代它

---

诚然，我不确定tbody会怎样，所以你可能最终需要删除整个表，然后重新绘制整个表，但这不是一件确定的事情。

结果证明，我提出的最佳实用答案是使用knockout.js重新编辑我的页面。 ().

---

通过将我的观点与可观察的事物联系起来。我将省去再次处理这些情况的麻烦

是的，这应该行得通，但出于某种原因，我不行。