使用Javascript ajax响应动态创建表

我正在研究Javascript。我的代码中有一些API调用（使用AJAX）。在我的UI中有一个按钮，显示

用户仪表板

。点击这个按钮，我使用AJAX进行了一些API调用，并显示了HTML UI，其中包含表中的行

上表中有两行。如果我关闭此弹出窗口，然后再次单击

USER DASHBOARD

按钮，它将在表中再次追加这两行。我不想再追加那些行

我使用AJAX响应生成表的代码如下所示：

getUserAccountDetailsCallback: function (userid, appid, response) {
    if (response != "") {
        var res = JSON.parse(response);
        var totalNoOfApps = document.getElementById('totalSites');
        var totalNoOfSubscriptions = document.getElementById('totalSubscribers');
        totalNoOfApps.innerHTML = res.totalNoOfApps;
        totalNoOfSubscriptions.innerHTML = res.totalNoOfSubscriptions;

        if (res.subscriptionsForCurrentAppId.length > 0) {
            for (var i = 0; i < res.subscriptionsForCurrentAppId.length; i++) {
                var td1 = document.createElement('td');
                td1.style.width = '30';
                td1.innerHTML = i + 1;
                var td2 = document.createElement('td');
                td2.innerHTML = res.subscriptionsForCurrentAppId[i].gatewayName;
                var td3 = document.createElement('td');
                td3.innerHTML = res.subscriptionsForCurrentAppId[i].priceCurrencyIso;
                var td4 = document.createElement('td');
                td4.innerHTML = res.subscriptionsForCurrentAppId[i].amountPaid;

                var date = new Date(res.subscriptionsForCurrentAppId[i].subscribedDate);
                date.toString();

                var td5 = document.createElement('td');
                td5.innerHTML = date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear(); //res.subscriptionsForCurrentAppId[i].subscribedDate;
                var td6 = document.createElement('td');
                td6.innerHTML = res.subscriptionsForCurrentAppId[i].transactionId;
                var td7 = document.createElement('td');
                td7.innerHTML = res.subscriptionsForCurrentAppId[i].active;

                var tr = document.createElement('tr');
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
                tr.appendChild(td5);
                tr.appendChild(td6);
                tr.appendChild(td7);

                var table = document.getElementById('tbl');

                table.appendChild(tr);
            }
        }
    }
}

getUserAccountDetailsCalback:函数（userid、appid、response）{
如果（响应！=“”）{
var res=JSON.parse（响应）；
var totalNoOfApps=document.getElementById（'totalSites'）；
var totalNoOfSubscriptions=document.getElementById（'totalSubscribers'）；
totalNoOfApps.innerHTML=res.totalNoOfApps；
totalNoOfSubscriptions.innerHTML=res.totalNoOfSubscriptions；
如果（res.subscriptionsForCurrentAppId.length>0）{
对于（变量i=0；i

---

请帮忙。我做错了。

要清理表，需要将其HTML内容设置为空

大概是这样的：

var table = document.getElementById('tbl');
table.innerHTML = "";

---

然后，添加新行。

在向表中添加任何数据之前，需要清空表

因此，添加这一行

table.innerHTML = '';

在

table.appendChild（tr）之前在您的代码中。
这会在每次调用函数时清空表，然后将的新数据追加到表中

如果有任何错误，请回复我很乐意帮助

乌特卡什·维什诺伊（Utkarsh Vishnoi）
在模型上贴一张js小提琴response@RamanathanMuthuraman我只是指table.appendChild（tr）；不应该附加同一条记录来更深入地了解或更全面地了解正在发生的事情，这是必需的。@RamanathanMuthuraman您能告诉我如何清除表内容吗？如果您能给我一把小提琴，我可以指出确切的问题，我想您有一些限制。。我的建议不是清除内容，而是仅在行不存在时追加行