Back

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); } } }