javascript - How to create dynamic HTML header

I am creating a dynamic HTML table which has col-span inside,the issue is I am not able to create that col-span headers dynamically. Below is my 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 and outlet are parent header inside outlets i.e Jayanagar,malleshwaram and kolar here inside this I have other object values i.e gross,discount,GST and amount

The four gross,discount,GST and amount these are as col-span which I am creating statically like innerHTML=gross
I want to create them dynamically and not getting the idea how to achieve that

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=".3.1/jquery.min.js"></script>
<link rel="stylesheet" href=".1.2/css/bootstrap.min.css">
<div align="left" class="table table-responsive" id="monDvScroll">
  <table id="dailySales"></table>
</div>

I am creating a dynamic HTML table which has col-span inside,the issue is I am not able to create that col-span headers dynamically. Below is my 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 and outlet are parent header inside outlets i.e Jayanagar,malleshwaram and kolar here inside this I have other object values i.e gross,discount,GST and amount

The four gross,discount,GST and amount these are as col-span which I am creating statically like innerHTML=gross
I want to create them dynamically and not getting the idea how to achieve that

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.2/css/bootstrap.min.css">
<div align="left" class="table table-responsive" id="monDvScroll">
  <table id="dailySales"></table>
</div>

As per requirement gross,discount,GST and amount all these are dynamic they can be 3 sometimes 2 and sometimes 1 so that I am trying to create dynamically
I have mented the lines in my code where I am creating these as headers

Edit

Here in the below JSON I have only discount,gst and amount there is no gross so in my table I only want to these three headers as col-span in my table

As solution provided by @Anilm doesn't seems to be doing like this

[{
    "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
  }
]

When in my JSON all gross,Discount,Gst and Amount are there then this will be output:

When only Discount,GST and Amount are there then this will be out put:

Similarly for others also.

These four gross,discount,GSTand amount are dynamic user is selecting any one,two or all then I want to populate the table.

Share Improve this question edited May 18, 2019 at 14:38 halfer 20.5k19 gold badges109 silver badges202 bronze badges asked Apr 15, 2019 at 7:57 manish thakur 82010 gold badges43 silver badges82 bronze badges

I do not really understand this question. Can you create a JSFiddle with the code and a sample HTML you would like to be the result of your code? That would identify the problem. – Lajos Arpad Commented Apr 15, 2019 at 8:26
If you have missing cells, leave them blank. A table normally has one th per column. If one row has a full set of data and the row after that has a missing cell explain how that's supposed to work. – zer00ne Commented Apr 15, 2019 at 9:19
@zer00ne The colspan and rowspan attributes are pretty mon, to cover this exact requirement. – MikeB Commented Apr 15, 2019 at 9:31
@LajosArpad i have already created a code snippet, and what are you not understanding? – manish thakur Commented Apr 15, 2019 at 9:32
@manishthakur the question is not well formed. One needs to read it several times to understand what the exact problem is. I will not do that. If you would like to have better chance of getting help, then you will need to improve your question. I have told you what you need to do. 1. Create a JSFiddle which reproduces the behavior you are talking about. I have seen the code snippet you have given, but I will not create a fiddle for you. You should do that. 2. Give us an example of HTML that should be the result of your code. That would explain the issue better than your words. – Lajos Arpad Commented Apr 15, 2019 at 9:55

| Show 7 more ments

3 Answers 3

Sorted by: Reset to default 3 +50

Try like this, I have modified some code from Anilm's answer. I hope this will work for you.

//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./bootstrap/4.1.2/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare./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="monDvScroll">
      <table id="dailySales"></table>
    </div>
  </body>

</html>

//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./bootstrap/4.1.2/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare./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="monDvScroll">
      <table id="dailySales"></table>
    </div>
</body>

</html>

Try:

thisSpan = 4;

th.setAttribute('colSpan', thisSpan );

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to create dynamic HTML header - Stack Overflow

Edit

3 Answers 3

与本文相关的文章

评论列表(0)