堆栈内存溢出
  繁体   English   中英

如何创建动态HTML标头

[英]How to create dynamic HTML header

 原文  2019-04-15 07:57:56  0   3    javascript/ jquery/ html-table

问题描述

我正在创建一个动态HTML表，里面有col-span，问题是我无法动态创建col-span标头。 下面是我的json

JSON 

[{
    "billdate": "2018-09-01",
    "outlet": "JAYANAGAR",
    "gross": 451458,
    "discount": 513,
    "GST": 25357,
    "amount": 476426
  },
  {
    "billdate": "2018-09-01",
    "outlet": "MALLESHWARAM",
    "gross": 87190,
    "discount": 0,
    "GST": 4930,
    "amount": 92141
  },
  {
    "billdate": "2018-09-01",
    "outlet": "KOLAR",
    "gross": 109308,
    "discount": 0,
    "GST": 5966,
    "amount": 115313
  },
  {
    "billdate": "2018-09-02",
    "outlet": "JAYANAGAR",
    "gross": 483194,
    "discount": 471,
    "GST": 28319,
    "amount": 511153
  },
  {
    "billdate": "2018-09-02",
    "outlet": "MALLESHWARAM",
    "gross": 109483,
    "discount": 0,
    "GST": 6198,
    "amount": 115704
  },
  {
    "billdate": "2018-09-02",
    "outlet": "KOLAR",
    "gross": 79305,
    "discount": 0,
    "GST": 4254,
    "amount": 83597
  },
  {
    "billdate": "2018-09-03",
    "outlet": "JAYANAGAR",
    "gross": 157660,
    "discount": 263,
    "GST": 9944,
    "amount": 167421
  },
  {
    "billdate": "2018-09-03",
    "outlet": "KOLAR",
    "gross": 51059,
    "discount": 0,
    "GST": 2693,
    "amount": 53775
  }
]

billdate和outlet是outlet内的父标题outlets即Jayanagar ， malleshwaram和kolar在这里我有其他对象值，即gross ， discount ， GST和amount

  • 这四个gross ， discount ， GST及服务GST和amount都是我所创建的col-span，如innerHTML=gross
  • 我想动态创建它们而不是想到如何实现它 

 var data = [{ "billdate": "2018-09-01", "outlet": "JAYANAGAR", "gross": 451458, "discount": 513, "GST": 25357, "amount": 476426 }, { "billdate": "2018-09-01", "outlet": "MALLESHWARAM", "gross": 87190, "discount": 0, "GST": 4930, "amount": 92141 }, { "billdate": "2018-09-01", "outlet": "KOLAR", "gross": 109308, "discount": 0, "GST": 5966, "amount": 115313 }, { "billdate": "2018-09-02", "outlet": "JAYANAGAR", "gross": 483194, "discount": 471, "GST": 28319, "amount": 511153 }, { "billdate": "2018-09-02", "outlet": "MALLESHWARAM", "gross": 109483, "discount": 0, "GST": 6198, "amount": 115704 }, { "billdate": "2018-09-02", "outlet": "KOLAR", "gross": 79305, "discount": 0, "GST": 4254, "amount": 83597 }, { "billdate": "2018-09-03", "outlet": "JAYANAGAR", "gross": 157660, "discount": 263, "GST": 9944, "amount": 167421 }, { "billdate": "2018-09-03", "outlet": "KOLAR", "gross": 51059, "discount": 0, "GST": 2693, "amount": 53775 } ] let formatData = function(data) { let billdates = []; let outlets = []; data.forEach(element => { if (billdates.indexOf(element.billdate) == -1) { billdates.push(element.billdate); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); return { data: data, billdates: billdates, outlets: outlets, }; }; let renderTable = function(data) { billdates = data.billdates; outlets = data.outlets; data = data.data; let tbl = document.getElementById("dailySales"); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "BillDate"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; let grandGross = 0; let grandDiscount = 0; let grandGst = 0; let outletWiseTotal = {}; let outletWiseGross = {}; let outletWiseDiscount = {}; let outletWiseGst = {}; th = document.createElement("th"); th.colSpan = 4; th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.colSpan = 4; th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; outletWiseGross[element] = 0; outletWiseDiscount[element] = 0; outletWiseGst[element] = 0; data.forEach(el => { if (el.outlet == element) { outletWiseTotal[element] += parseInt(el.amount); outletWiseGross[element] += parseInt(el.gross); outletWiseDiscount[element] += parseInt(el.discount); outletWiseGst[element] += parseInt(el.GST); } }); grandTotal += outletWiseTotal[element]; //calculating totals for Total column grandGross += outletWiseGross[element]; grandDiscount += outletWiseDiscount[element]; grandGst += outletWiseGst[element]; }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = ""; headerRow.appendChild(th); for (i = 0; i < outlets.length + 1; i++) { th = document.createElement("th"); th.innerHTML = "Discount"; //here statically i am giving the header names th.classList.add("text-center"); th.classList.add("discount"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "GST"; //here statically i am giving the header names th.classList.add("text-center"); th.classList.add("gst"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Net_Amount"; //here statically i am giving the header names th.classList.add("text-center"); th.classList.add("netAmount"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Gross_Amount"; //here statically i am giving the header names th.classList.add("text-center"); th.classList.add("grossAmount"); headerRow.appendChild(th); } headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); headerRow = document.createElement("tr"); td = document.createElement("th"); td.innerHTML = "Total"; td.classList.add("text-center"); headerRow.appendChild(td); outlets.forEach(element => { // these are the table rows for each column td = document.createElement("th"); td.innerHTML = outletWiseGross[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseGst[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); }); td = document.createElement("th"); td.innerHTML = grandTotal.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandGst.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandGross.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); billdates.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; let totalGross = 0; let totalDiscount = 0; let totalGST = 0; outlets.forEach(outlet => { let ta = 0; let tg = 0; let tdi = 0; let tgst = 0; data.forEach(d => { if (d.billdate == element && d.outlet == outlet) { total += parseInt(d.amount); totalGross += parseInt(d.gross); totalDiscount += parseInt(d.discount); totalGST += parseInt(d.GST); ta = d.amount; tg = d.gross; tdi = d.discount; tgst = d.GST; } }); td = document.createElement("td"); td.innerHTML = tg.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = tdi.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = tgst.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = ta.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); }); td = document.createElement("td"); td.innerHTML = total.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalGST.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalGross.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); tbody.appendChild(row); }); table.appendChild(tbody); tbl.innerHTML = ""; tbl.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } let formatedData = formatData(data); renderTable(formatedData); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <div align="left" class="table table-responsive" id="commonDvScroll"> <table id="dailySales"></table> </div>

  • 根据要求gross ， discount ， GST及服务GST和amount所有这些都是动态的，它们有时可以是3，有时是2，所以我试图动态创建
  • 我已经在我的代码中评论了这些行，我将其创建为标题

编辑

在下面的JSON我只有discount ， gst和amount没有粗，所以在我的表中我只想把这三个标题作为我表中的col-span

由于@Anilm提供的解决方案似乎不是这样做的 

[{
    "billdate": "2018-09-01",
    "outlet": "JAYANAGAR",

    "discount": 513,
    "GST": 25357,
    "amount": 476426
  },
  {
    "billdate": "2018-09-01",
    "outlet": "MALLESHWARAM",

    "discount": 0,
    "GST": 4930,
    "amount": 92141
  },
  {
    "billdate": "2018-09-01",
    "outlet": "KOLAR",

    "discount": 0,
    "GST": 5966,
    "amount": 115313
  },
  {
    "billdate": "2018-09-02",
    "outlet": "JAYANAGAR",

    "discount": 471,
    "GST": 28319,
    "amount": 511153
  },
  {
    "billdate": "2018-09-02",
    "outlet": "MALLESHWARAM",
           "discount": 0,
    "GST": 6198,
    "amount": 115704
  },
  {
    "billdate": "2018-09-02",
    "outlet": "KOLAR",

    "discount": 0,
    "GST": 4254,
    "amount": 83597
  },
  {
    "billdate": "2018-09-03",
    "outlet": "JAYANAGAR",

    "discount": 263,
    "GST": 9944,
    "amount": 167421
  },
  {
    "billdate": "2018-09-03",
    "outlet": "KOLAR",

    "discount": 0,
    "GST": 2693,
    "amount": 53775
  }
]

在我的JSON中，所有gross ， Discount ， Gst和Amount都在那里，那么这将输出：

这将是输出

如果只有Discount ， GST及服务GST和Amount ，那么这将是：

这将是出局

同样对其他人也是。

这四个gross ， discount ， GST和amount是动态用户选择任何一个，两个或所有然后我想填充表。

3 个解决方案

解决方案1
 3  2019-04-15 12:27:43

 //added createTable function >> is called on body on load function createTable(){ let formatedData = formatData(data); renderTable(formatedData); } var data = [{ "billdate": "2018-09-01", "outlet": "JAYANAGAR", "gross": 451458, "discount": 513, "GST": 25357, "amount": 476426 }, { "billdate": "2018-09-01", "outlet": "MALLESHWARAM", "gross": 87190, "discount": 0, "GST": 4930, "amount": 92141 }, { "billdate": "2018-09-01", "outlet": "KOLAR", "gross": 109308, "discount": 0, "GST": 5966, "amount": 115313 }, { "billdate": "2018-09-02", "outlet": "JAYANAGAR", "gross": 483194, "discount": 471, "GST": 28319, "amount": 511153 }, { "billdate": "2018-09-02", "outlet": "MALLESHWARAM", "gross": 109483, "discount": 0, "GST": 6198, "amount": 115704 }, { "billdate": "2018-09-02", "outlet": "KOLAR", "gross": 79305, "discount": 0, "GST": 4254, "amount": 83597 }, { "billdate": "2018-09-03", "outlet": "JAYANAGAR", "gross": 157660, "discount": 263, "GST": 9944, "amount": 167421 }, { "billdate": "2018-09-03", "outlet": "KOLAR", "gross": 51059, "discount": 0, "GST": 2693, "amount": 53775 } ] let formatData = function(data) { let billdates = []; let outlets = []; let arr=[]; data.forEach(element => { if (billdates.indexOf(element.billdate) == -1) { billdates.push(element.billdate); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); outlets.push(); //checking for property of each object of array "data" and if property exists adding to custom_Obj >> then adding to array and returning. var jsonObj= {}; if(element.hasOwnProperty("gross")){ jsonObj["gross"]=element.gross; } if(element.hasOwnProperty("discount")){ jsonObj["discount"]=element.discount; } if(element.hasOwnProperty("GST")){ jsonObj["GST"]=element.GST; } if(element.hasOwnProperty("amount")){ jsonObj["amount"]=element.amount; } arr.push(jsonObj); } }); return { data: data, billdates: billdates, outlets: outlets, arr:arr }; } let renderTable = function(data) { var arr=data.arr; billdates = data.billdates; outlets = data.outlets; data = data.data; let tbl = document.getElementById("dailySales"); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "BillDate"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; let grandGross = 0; let grandDiscount = 0; let grandGst = 0; let outletWiseTotal = {}; let outletWiseGross = {}; let outletWiseDiscount = {}; let outletWiseGst = {}; th = document.createElement("th"); th.colSpan = 4; th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.colSpan = 4; th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; outletWiseGross[element] = 0; outletWiseDiscount[element] = 0; outletWiseGst[element] = 0; data.forEach(el => { if (el.outlet == element) { outletWiseTotal[element] += parseInt(el.amount); outletWiseGross[element] += parseInt(el.gross); outletWiseDiscount[element] += parseInt(el.discount); outletWiseGst[element] += parseInt(el.GST); } }); grandTotal += outletWiseTotal[element]; //calculating totals for Total column grandGross += outletWiseGross[element]; grandDiscount += outletWiseDiscount[element]; grandGst += outletWiseGst[element]; }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = ""; headerRow.appendChild(th); //As in this code you are creating "total" column explicitly and not by json,So to create the header for the total column I am adding this headers to array[0] manually. //Otherwise header for that column cannot be populated dynamically. //Or you can add a dummy header obj in data array. var totalcoloumn_obj={"gross":"","discount":"","GST":"","amount":""}; //as you showed total column in first, I am shifiting the array index by 1 and adding the total dymmy object at first index. arr.unshift(totalcoloumn_obj); //Creating column headers dynamically based on the data array that you declared on the top. for (var j = 0; j < arr.length; j++) { for(var key in arr[j]) { var th_dynamic = document.createElement("TH"); var t = document.createTextNode(key); th_dynamic.appendChild(t); th_dynamic.classList.add("text-center"); headerRow.appendChild(th_dynamic); } } headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); headerRow = document.createElement("tr"); td = document.createElement("th"); td.innerHTML = "Total"; td.classList.add("text-center"); headerRow.appendChild(td); outlets.forEach(element => { // these are the table rows for each column td = document.createElement("th"); td.innerHTML = outletWiseGross[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseGst[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); }); td = document.createElement("th"); td.innerHTML = grandTotal.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandGst.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandGross.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); billdates.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; let totalGross = 0; let totalDiscount = 0; let totalGST = 0; outlets.forEach(outlet => { let ta = 0; let tg = 0; let tdi = 0; let tgst = 0; data.forEach(d => { if (d.billdate == element && d.outlet == outlet) { total += parseInt(d.amount); totalGross += parseInt(d.gross); totalDiscount += parseInt(d.discount); totalGST += parseInt(d.GST); ta = d.amount; tg = d.gross; tdi = d.discount; tgst = d.GST; } }); td = document.createElement("td"); td.innerHTML = tg.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = tdi.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = tgst.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = ta.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); }); td = document.createElement("td"); td.innerHTML = total.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalGST.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalGross.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); tbody.appendChild(row); }); table.appendChild(tbody); tbl.innerHTML = ""; tbl.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="Utility.js"></script> </head> <body onLoad="createTable();"> <div align="left" class="table table-responsive" id="commonDvScroll"> <table id="dailySales"></table> </div> </body> </html>

解决方案2
 3 已采纳  2019-05-14 05:39:02

试试这个，我修改了Anilm的答案中的一些代码。 我希望这对你有用。 

 //added createTable function >> is called on body on load function createTable(){ let formatedData = formatData(data); renderTable(formatedData); } var hasGross = false;; var hasGST = false; var hasDiscount = false; var hasTotal = false; var data = [{ "billdate": "2018-09-01", "outlet": "JAYANAGAR", "discount": 513, "gross": 25357, "amount": 476426 }, { "billdate": "2018-09-01", "outlet": "MALLESHWARAM", "discount": 0, "gross": 4930, "amount": 92141 }, { "billdate": "2018-09-01", "outlet": "KOLAR", "discount": 0, "gross": 5966, "amount": 115313 }, { "billdate": "2018-09-02", "outlet": "JAYANAGAR", "discount": 471, "gross": 28319, "amount": 511153 }, { "billdate": "2018-09-02", "outlet": "MALLESHWARAM", "discount": 0, "gross": 6198, "amount": 115704 }, { "billdate": "2018-09-02", "outlet": "KOLAR", "discount": 0, "gross": 4254, "amount": 83597 }, { "billdate": "2018-09-03", "outlet": "JAYANAGAR", "discount": 263, "gross": 9944, "amount": 167421 }, { "billdate": "2018-09-03", "outlet": "KOLAR", "discount": 0, "gross": 2693, "amount": 53775 } ] let formatData = function(data) { let billdates = []; let outlets = []; let arr=[]; data.forEach(element => { if (billdates.indexOf(element.billdate) == -1) { billdates.push(element.billdate); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); outlets.push(); //checking for property of each object of array "data" and if property exists adding to custom_Obj >> then adding to array and returning. var jsonObj= {}; if(element.hasOwnProperty("gross")){ hasGross = true; jsonObj["gross"]=element.gross; } if(element.hasOwnProperty("discount")){ hasDiscount = true; jsonObj["discount"]=element.discount; } if(element.hasOwnProperty("GST")){ hasGST = true; jsonObj["GST"]=element.GST; } if(element.hasOwnProperty("amount")){ hasTotal = true; jsonObj["amount"]=element.amount; } arr.push(jsonObj); } }); return { data: data, billdates: billdates, outlets: outlets, arr:arr }; } let renderTable = function(data) { var arr=data.arr; billdates = data.billdates; outlets = data.outlets; data = data.data; let tbl = document.getElementById("dailySales"); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "BillDate"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; let grandGross = 0; let grandDiscount = 0; let grandGst = 0; let outletWiseTotal = {}; let outletWiseGross = {}; let outletWiseDiscount = {}; let outletWiseGst = {}; th = document.createElement("th"); let cols = 0; if(hasGST){ cols++; } if(hasGross){ cols++ } if(hasDiscount){ cols++ } if(hasTotal){ cols++ } th.colSpan = cols; th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.colSpan = cols th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; outletWiseGross[element] = 0; outletWiseDiscount[element] = 0; outletWiseGst[element] = 0; data.forEach(el => { if (el.outlet == element) { if(hasTotal){ outletWiseTotal[element] += parseInt(el.amount); } if(hasGross){ outletWiseGross[element] += parseInt(el.gross); } if(hasDiscount){ outletWiseDiscount[element] += parseInt(el.discount); } if(hasGST){ outletWiseGst[element] += parseInt(el.GST); } } }); if(hasTotal){ grandTotal += outletWiseTotal[element]; //calculating totals for Total column } if(hasGross){ grandGross += outletWiseGross[element]; } if(hasDiscount){ grandDiscount += outletWiseDiscount[element]; } if(hasGST){ grandGst += outletWiseGst[element]; } }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = ""; headerRow.appendChild(th); //As in this code you are creating "total" column explicitly and not by json,So to create the header for the total column I am adding this headers to array[0] manually. //Otherwise header for that column cannot be populated dynamically. //Or you can add a dummy header obj in data array. var totalcoloumn_obj={}; if(hasGross){ totalcoloumn_obj.gross = ""; } if(hasDiscount){ totalcoloumn_obj.discount = ""; } if(hasGST){ totalcoloumn_obj.GST = ""; } if(hasTotal){ totalcoloumn_obj.amount = ""; } //as you showed total column in first, I am shifiting the array index by 1 and adding the total dymmy object at first index. arr.unshift(totalcoloumn_obj); //Creating column headers dynamically based on the data array that you declared on the top. for (var j = 0; j < arr.length; j++) { for(var key in arr[j]) { var th_dynamic = document.createElement("TH"); var t = document.createTextNode(key); th_dynamic.appendChild(t); th_dynamic.classList.add("text-center"); headerRow.appendChild(th_dynamic); } } headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); headerRow = document.createElement("tr"); td = document.createElement("th"); td.innerHTML = "Total"; td.classList.add("text-center"); headerRow.appendChild(td); outlets.forEach(element => { // these are the table rows for each column if(hasGross){ td = document.createElement("th"); td.innerHTML = outletWiseGross[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); } if(hasDiscount){ td = document.createElement("th"); td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); } if(hasGST){ td = document.createElement("th"); td.innerHTML = outletWiseGst[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); } if(hasTotal){ td = document.createElement("th"); td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); } }); if(hasTotal){ td = document.createElement("th"); td.innerHTML = grandTotal.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); } if(hasGST){ td = document.createElement("th"); td.innerHTML = grandGst.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); } if(hasDiscount){ td = document.createElement("th"); td.innerHTML = grandDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); } if(hasGross) { td = document.createElement("th"); td.innerHTML = grandGross.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); } thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); billdates.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; let totalGross = 0; let totalDiscount = 0; let totalGST = 0; outlets.forEach(outlet => { let ta = 0; let tg = 0; let tdi = 0; let tgst = 0; data.forEach(d => { if (d.billdate == element && d.outlet == outlet) { if(hasTotal){ total += parseInt(d.amount); ta = d.amount; } if(hasDiscount){ totalDiscount += parseInt(d.discount); tdi = d.discount; } if(hasGST){ totalGST += parseInt(d.GST); tgst = d.GST; } if(hasGross){ totalGross += parseInt(d.gross); tg = d.gross; } } }); //console.log(tg) if(hasGross){ td = document.createElement("td"); td.innerHTML = tg.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); } if(hasDiscount){ td = document.createElement("td"); td.innerHTML = tdi.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); } if(hasGST){ td = document.createElement("td"); td.innerHTML = tgst.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); } if(hasTotal){ td = document.createElement("td"); td.innerHTML = ta.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); } }); if(hasTotal){ td = document.createElement("td"); td.innerHTML = total.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); } if(hasGST){ td = document.createElement("td"); td.innerHTML = totalGST.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); } if(hasDiscount){ td = document.createElement("td"); td.innerHTML = totalDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); } if(hasGross){ td = document.createElement("td"); td.innerHTML = totalGross.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); } tbody.appendChild(row); }); table.appendChild(tbody); tbl.innerHTML = ""; tbl.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="Utility.js"></script> </head> <body onLoad="createTable();"> <div align="left" class="table table-responsive" id="commonDvScroll"> <table id="dailySales"></table> </div> </body> </html>

解决方案3
 1  2019-04-15 08:56:50

尝试：

thisSpan = 4;

th.setAttribute('colSpan', thisSpan );

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何 append 动态 HTML 表中的 header 行 如何创建动态HTML文件 如何在HTML中创建动态页面？ 如何使用 Javascript 和 HTML 创建动态功能？ 如何使用 ajax 调用创建动态 html 表 如何使用Firebase创建动态HTML表？ 如何使用 HTML 和 CSS 创建动态方块 如何删除带有动态标题的 HTML 列<th>姓名 如何使用动态源将 Auth Header 添加到 HTML5 视频 如何在其他页面动态插入mainpage.html的header和footer？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM