Как использовать javascript Ответ AJAX для создания таблицы динамически

Question

Я работаю над javascript. У меня есть некоторые вызовы API (с использованием Ajax) в моем коде. Существует кнопка в моем UI

на нажатие этой кнопки я делаю некоторые API вызова с помощью AJAX и отображающее ниже HTML UI:

В приведенной выше таблице есть 2 строки. Теперь, если я закрою это всплывающее окно, а затем снова нажмите кнопку User Dashboard, он добавит эти 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){