如何使用javascript AJAX響應動態創建表

Question

我正在使用javascript。 我的代碼中有一些API調用（使用Ajax）。 我的用戶界面中有一個按鈕

單擊此按鈕后，我正在使用AJAX進行一些API調用，並在HTML UI下方顯示：

在上表中有2行。 現在，如果我關閉此彈出窗口，然后再次單擊“ 用戶儀表板”按鈕，它將在表中再次添加這兩行。 我不想再追加這些行。

我使用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

1. 添加thead和tbody
   <table>
<thead><tr><th>#</th><th>Gateway.....</tr></thead>
<tbody id="tBodyId"></tbody>
</table>
2. 在附加之前刪除tbody的內容

像這樣：

var tBody = document.getElementById("tBodyID");
while (tBody.firstChild) {
  tBody.removeChild(tBody.firstChild);
}
if(res.subscriptionsForCurrentAppId.length > 0){