使用Javascript Ajax響應動態創建表

Question

我正在使用Javascript。 我的代碼中有一些API調用（使用AJAX）。 我的用戶界面中有一個名為USER DASHBOARD的按鈕。 單擊此按鈕后，我正在使用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);
            }
        }
    }
}

請幫忙。 我在哪里做錯了。

Answer 1

要清理表，您需要將其HTML內容設置為空。

像這樣：

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

之后，添加新行。

Answer 2

您需要先清空表，然后再向其中添加任何數據。

因此添加此行

table.innerHTML = '';

在table.appendChild(tr);之前table.appendChild(tr); 在您的代碼中。 每次調用該函數時都會清空表，然后將的新數據添加到表中。

如果有任何錯誤，請回復，我很樂意提供幫助，

Utkarsh Vishnoi