Использовать Javascript ajax-ответ для динамического создания таблицы

Я работаю над Javascript. У меня есть некоторые вызовы API (с использованием AJAX) в моем коде. В моем пользовательском интерфейсе есть кнопка USER DASHBOARD. При нажатии этой кнопки я делаю вызовы API с помощью AJAX и отображаю HTML-интерфейс, в котором есть таблица со строками.Использовать Javascript ajax-ответ для динамического создания таблицы

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

Пожалуйста, помогите. Где я поступаю неправильно.

источник

2015-05-20 mahendra kawde

Разместить JS скрипку с издеваться вверх ответ –

@RamanathanMuthuraman Я просто имею в виду table.appendChild (Tr); не следует добавлять одну и ту же запись –

Чтобы получить более глубокое понимание или более подробную картину происходящего, это необходимо .. –

Чтобы очистить таблицу, вам необходимо установить свой HTML-контент в пустую.

Что-то вроде этого:

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

После этого, добавьте новые строки.

источник

2015-05-20 11:27:25

Перед добавлением каких-либо данных вам необходимо очистить таблицу.

Поэтому добавьте эту строку

table.innerHTML = '';

до того table.appendChild(tr); в вашем коде. Это опустошает вашу таблицу каждый раз, когда вызывается функция. Затем добавьте к ней новые данные.

Если есть какие-либо ошибки, пожалуйста, ответ я рад помочь,

Utkarsh Vishnoi

источник

2015-05-20 11:36:46

Использовать Javascript ajax-ответ для динамического создания таблицы

ответ

Смежные вопросы