Make Html table dynamically
Copy Below Code
View As A Text File
Show Text Only
Show API
Edit Code
var table = $("#vendorCalls");
var vendorsIDsArr = [];
function vendorCallsBuilder(response) {
response = JSON.parse(response);
var keys = Object.values(response);
var statsData = keys[0];
var instance = Object.keys(response).toString();
var trString = '<tr class="tr_' + instance + '"><td valign="top">' + instance + '</td>';
trString = trString + getAllTdTable(instance, statsData);
trString = trString + '</tr>';
table.append(trString);
statsData.forEach(function(element) {
upsertRow(element, instance);
});
}
function getAllTdTable(instance, statsData) {
var str = '';
vendorsIDsArr.forEach(function(value) {
tdElement = instance + '_td_' + value;
str += '<td class="inst_all inst_' + instance + ' ' + tdElement + '">0</td>';
});
return str;
}
function upsertRow(element, instance) {
if (vendorsIDsArr.includes(element.id)==false) {
vendorsIDsArr.push(element.id);
}
thElement = 'head_' + element.id;
tdElement = instance + '_td_' + element.id;
if ($("." + tdElement).length == 0) {
var newHeaderCell = $('<td class="inst_all inst_' + instance + ' ' + thElement + '" data-instance="' + instance + '" data-vendor-id="head_' + element.id + '">' + element.VendorName + '</td>');
table.find('thead tr').append(newHeaderCell);
table.find('tbody tr').each(function() {
var newRowCell = $('<td class="inst_all inst_' + instance + ' ' + tdElement + '" data-instance="' + instance + '" data-vendor-id="tr_' + element.id + '">0</td>');
$(this).append(newRowCell);
if ($(this).hasClass('tr_' + instance)) {
$("." + tdElement).html(element.totalCalls);
}
});
} else {
if ($("." + tdElement).length > 0) {
$("." + tdElement).html(element.totalCalls);
}
}
}