使用 Javascript ajax 响应动态创建 table

Question

我正在研究 Javascript。我的代码中有一些 API 调用（使用 AJAX）。我的 UI 中有一个按钮说 USER DASHBOARD。单击此按钮后，我将使用 AJAX 进行一些 API 调用并显示 HTML UI 其中包含 table 行。

在上面的 table 中有两行。如果我关闭此弹出窗口然后再次单击 USER DASHBOARD 按钮，它将再次在 table 中附加这两行。我不想再次附加这些行。

我使用 AJAX 响应形成 table 的代码如下所示：

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

要清理您的 table，您需要将其 HTML 内容设置为空。

像这样：

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

之后，添加新行。

Answer 2

您需要先清空 table，然后再向其添加任何数据。

因此添加这一行

table.innerHTML = '';

在您的代码中 table.appendChild(tr); 之前。每次函数 called.and 时都会清空你的 table 然后将新数据附加到它。

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

Utkarsh Vishnoi

使用 Javascript ajax 响应动态创建 table

Use Javascript ajax response to create table dynamically

html

javascript

ajax

html-table