HTMLテーブルをクリックで拡張する方法

JavaScriptを使用してHTMLテーブルをレンダリングしています。テーブルを作成しましたが、今度は、行を展開してクリックするなど、新しいデータを行に表示する必要があります。

テーブル機能：

テーブルにデータを入力しています。ブランドごとにいくつかのアイテムがあり、ブランドをクリックしたときに表示したいと思います。
テーブルをほぼ作成しましたが、展開可能な行を作成できませんでした
私の1つの列にも間違ったデータが入力されています

私のコードでは、すべての行にコメントしています。

直面している問題

GRN enteryブランドとしてtbody内に入力するnetamountを計算している行にはすでにコメントしていますが、それが問題の原因です

2つのコードスニペットを作成しました。1つは完全に静的なHTMLとして、もう1つは実行したことを示しています。

Googleで見つけたヘルプ

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<table class="table table-responsive table-hover table-bordered">
  <thead>
    <tr>
      <th> Brand Name</th>
      <th colspan="2">Total</th>
      <th colspan="2">Jayanagar</th>
      <th colspan="2">Malleshwaram</th>
      <th colspan="2">Kolar</th>
    </tr>
    <tr>
      <th></th>
      <th>Grn Entery</th>
      <th>Sales</th>
      <th>Grn Entery</th>
      <th>Sales</th>
      <th>Grn Entery</th>
      <th>Sales</th>
      <th>Grn Entery</th>
      <th>Sales</th>
    </tr>
    <tr>
      <th>Total</th>
      <th>1,97,445</th>
      <th>6,83,880</th>
      <th>1,97,445</th>
      <th>4,76,426</th>
      <th>0</th>
      <th>1,15,313</th>
      <th>0</th>
      <th>92,141</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="clickable" data-toggle="collapse" id="row1" data-target=".row1"><i class="fas fa-plus" id="test"></i>&nbsp</span>Bakery FG</td>
      <td>1,610</td>
      <td>0.82%</td>
      <td>1,610 </td>
      <td>0.82%</td>
      <!--  this is comming as (1610/197445)*100 -->
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row1">
      <td>Khara Boondhi-L</td>
      <td>980</td>
      <td>0.50%</td>
      <td>980</td>
      <td>0.50%</td>
      <!--  this is comming as (980/197445)*100 -->
      <td>0</td>
      <td>0.00%</td>
      <!-- lly for other outlets it will be calculated  -->
      <td>0</td>
      <td>0.00%</td>
    </tr>
    <tr class="collapse row1">
      <td>Samosa-L</td>
      <td>130</td>
      <td>0.7%</td>
      <td>130</td>
      <td>0.7%</td>
      <!--  this is comming as (130/197445)*100 -->
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>
    </tr>
    <tr class="collapse row1">
      <td>Corn Flakes Masala-L</td>
      <td>500</td>
      <td>0.25%</td>
      <td>500</td>
      <td>0.25%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>
    </tr>
    <tr>
      <td><span class="clickable" data-toggle="collapse" data-target=".row2"><i class="fas fa-plus" id="test"></i>&nbsp</span>Pastry & Cake FG</td>
      <td>49,230</td>
      <td>25.00%</td>
      <td>49,230</td>
      <td>25.00%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row2">
      <td>Plum Cake 250gm</td>
      <td>110</td>
      <td>0.05%</td>
      <td>110</td>
      <td>0.05%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row2">
      <td>Butterscotch Cake</td>
      <td>720</td>
      <td>0.36%</td>
      <td>720</td>
      <td>0.36%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row2">
      <td>Chocolate chips cake</td>
      <td>40000</td>
      <td>20.25%</td>
      <td>40000</td>
      <td>20.25%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row2">
      <td>Mango Delight Cake</td>
      <td>14000</td>
      <td>7.09%</td>
      <td>14000</td>
      <td>7.09%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>


    </tr>
    <tr class="collapse row2">
      <td>Almond Honey Chocolate Cake</td>
      <td>500</td>
      <td>0.25%
        <td>500</td>
        <td>0.25%
          <td>0</td>
          <td>0.00%</td>
          <td>0</td>
          <td>0.00%</td>


    </tr>
    <tr class="collapse row2">
      <td>Peach Cake</td>
      <td>5500</td>
      <td>2.78%</td>
      <td>5500</td>
      <td>2.78%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row2">
      <td>Black Forest Cake</td>
      <td>1000</td>
      <td>0.50%</td>
      <td>1000</td>
      <td>0.50%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr>
      <td><span class="clickable" data-toggle="collapse" data-target=".row3"><i class="fas fa-plus" id="test"></i>&nbsp</span>Ice Cream FG</td>
      <td>108441</td>
      <td>54.92%</td>
      <td>108441</td>
      <td>54.92%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row3">
      <td>Chocolate Crazy Boom</td>
      <td>2360</td>
      <td>1.19%</td>
      <td>2360</td>
      <td>1.19%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>


    </tr>
    <tr class="collapse row3">
      <td>Kesar Badam Falooda</td>
      <td>4430</td>
      <td>2.24%</td>
      <td>4430</td>
      <td>2.24%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>


    </tr>
    <tr class="collapse row3">
      <td>Strawberry Ice-cream</td>
      <td>1231</td>
      <td>0.62%</td>
      <td>1231</td>
      <td>0.62%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>


    </tr>
    <tr class="collapse row3">
      <td>TOP- Chocochips</td>
      <td>2200</td>
      <td>1.11%</td>
      <td>2200</td>
      <td>1.11%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row3">
      <td>Cheese Cake Ice-Cream</td>
      <td>500</td>
      <td>0.25%</td>
      <td>500</td>
      <td>0.25%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row3">
      <td>Sundae Large</td>
      <td>2350</td>
      <td>1.20%</td>
      <td>2350</td>
      <td>1.20%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row3">
      <td>Mango Ice-cream</td>
      <td>8000</td>
      <td>40.5%</td>
      <td>8000</td>
      <td>40.5%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row3">
      <td>Ice Blue Sundae</td>
      <td>2340</td>
      <td>1.19%</td>
      <td>2340</td>
      <td>1.19%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row3">
      <td>Creamy Litchi Boom</td>
      <td>2200</td>
      <td>1.11%</td>
      <td>2200</td>
      <td>1.11%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row3">
      <td>Cookies Ice-cream</td>
      <td>7000</td>
      <td>3.54%</td>
      <td>7000</td>
      <td>3.54%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row3">
      <td>TOP- Wafer</td>
      <td>88000</td>
      <td>44.56%</td>
      <td>88000</td>
      <td>44.56%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row3">
      <td>Litchi cherry Sundae</td>
      <td>2440</td>
      <td>1.23%</td>
      <td>2440</td>
      <td>1.23%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row3">
      <td>Peach Malaba</td>
      <td>2230</td>
      <td>1.12%</td>
      <td>2230</td>
      <td>1.12%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row3">
      <td>Cherry Mania Ice-Cream</td>
      <td>2700</td>
      <td>1.36%</td>
      <td>2700</td>
      <td>1.36%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr>
      <td><span class="clickable" data-toggle="collapse" data-target=".row4"><i class="fas fa-plus" id="test"></i>&nbsp</span>North Indian FG</td>
      <td>324</td>
      <td>0.17%</td>
      <td>324</td>
      <td>0.17%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>

    </tr>
    <tr class="collapse row4">
      <td>Fruit Mixture</td>
      <td>324</td>
      <td>0.17%</td>
      <td>324</td>
      <td>0.17%</td>
      <td>0</td>
      <td>0.00%</td>
      <td>0</td>
      <td>0.00%</td>
    </tr>



  </tbody>
</table>

上記のスニペットのようなものを作成したいのですが、行をクリックすると拡張されます。ユーザーがplusアイコンをクリックしたときにそれを実行したいのですが、これは実行方法を示していますです。

JSONデータを含む私の動的コード

function format(number, decimals = 2, locale = 'en-in') {
  const fixed = parseInt(number).toFixed(decimals);
  const [int, dec] = fixed.split('.')
  const intFormatted = (+int).toLocaleString(locale)
  return intFormatted + (dec ? '.' + dec : '');
}
var data = [{
    "outlet": "JAYANAGAR",
    "brandname": "Bakery FG",
    "itemname": "Khara Boondhi-L",
    "transactionType": "TransferIn",
    "netamount": 980
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Bakery FG",
    "itemname": "Samosa-L",
    "transactionType": "TransferIn",
    "netamount": 130
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Bakery FG",
    "itemname": "Corn Flakes Masala-L",
    "transactionType": "TransferIn",
    "netamount": 500
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Pastry & Cake FG",
    "itemname": "Plum Cake 250gm",
    "transactionType": "TransferIn",
    "netamount": 110
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Pastry & Cake FG",
    "itemname": "Butterscotch Cake",
    "transactionType": "TransferIn",
    "netamount": 720
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Pastry & Cake FG",
    "itemname": "Chocolate chips cake",
    "transactionType": "TransferIn",
    "netamount": 40000
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Pastry & Cake FG",
    "itemname": "Mango Delight Cake",
    "transactionType": "TransferIn",
    "netamount": 14000
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Pastry & Cake FG",
    "itemname": "Almond Honey Chocolate Cake",
    "transactionType": "TransferIn",
    "netamount": 500
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Pastry & Cake FG",
    "itemname": "Peach Cake",
    "transactionType": "TransferIn",
    "netamount": 5500
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Pastry & Cake FG",
    "itemname": "Black Forest Cake",
    "transactionType": "TransferIn",
    "netamount": 1000
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Chocolate Crazy Boom",
    "transactionType": "TransferIn",
    "netamount": 2360
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Hot Chocolate Fudge",
    "transactionType": "TransferIn",
    "netamount": 2340
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Chocolate Sugar Free Ice-Cream",
    "transactionType": "TransferIn",
    "netamount": 1000
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Kesar Badam Falooda",
    "transactionType": "TransferIn",
    "netamount": 4430
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Strawberry Ice-cream",
    "transactionType": "TransferIn",
    "netamount": 1231
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "TOP- Chocochips",
    "transactionType": "TransferIn",
    "netamount": 2200
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Cheese Cake Ice-Cream",
    "transactionType": "TransferIn",
    "netamount": 500
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Sundae Large",
    "transactionType": "TransferIn",
    "netamount": 2350
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Mango Ice-cream",
    "transactionType": "TransferIn",
    "netamount": 8000
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "TOP- Shooting Star",
    "transactionType": "TransferIn",
    "netamount": 2360
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Ice Blue Sundae",
    "transactionType": "TransferIn",
    "netamount": 2340
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Creamy Litchi Boom",
    "transactionType": "TransferIn",
    "netamount": 2200
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Cookies Ice-cream",
    "transactionType": "TransferIn",
    "netamount": 7000
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "TOP- Wafer",
    "transactionType": "TransferIn",
    "netamount": 88000
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Litchi cherry Sundae",
    "transactionType": "TransferIn",
    "netamount": 2440
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Peach Malaba",
    "transactionType": "TransferIn",
    "netamount": 2230
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Cherry Mania Ice-Cream",
    "transactionType": "TransferIn",
    "netamount": 2700
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "North Indian FG",
    "itemname": "Fruit Mixture",
    "transactionType": "TransferIn",
    "netamount": 324
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "NA",
    "itemname": "NA",
    "transactionType": "Sales",
    "netamount": 476426
  },
  {
    "outlet": "KOLAR",
    "brandname": "NA",
    "itemname": "NA",
    "transactionType": "Sales",
    "netamount": 115313
  },
  {
    "outlet": "MALLESHWARAM",
    "brandname": "NA",
    "itemname": "NA",
    "transactionType": "Sales",
    "netamount": 92141
  }
]
let formatData = function(data) {
  let brandnames = [];
  let itemnames = [];
  let outlets = [];
  let maxUniqueForOutlets = {};
  data.forEach(element => {

    if (!maxUniqueForOutlets[element["brandname"]]) {
// i just want to filter this brand and items whichhave NA
      maxUniqueForOutlets[element["brandname"]] = [];
      console.log(maxUniqueForOutlets[element["brandname"]]) //key value pair of brandname and itemname
    }
    if (maxUniqueForOutlets[element["brandname"]].indexOf(element["itemname"]) == -1) {
      maxUniqueForOutlets[element["brandname"]].Push(element["itemname"]);
    }

    if (brandnames.indexOf(element.brandname) == -1 && (element.brandname) !== "NA") { //taking brandname which do not have bradname===NA
      brandnames.Push(element.brandname);
    }
    if (itemnames.indexOf(element.itemname) == -1 && (element.itemname) !== "NA") { //taking itemname which do not have bradname===NA
      itemnames.Push(element.itemname);

    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.Push(element.outlet);
    }
  });


  return {
    data: data,
    brandnames: brandnames,
    itemnames: itemnames,
    outlets: outlets,
    maxUniqueForOutlets: maxUniqueForOutlets
  };
};
var totalSalesPercentage = '';
var olWiseSalesPercentage = '';
let renderTable = function(data) {
  let brandnames = data.brandnames;
  let itemnames = data.itemnames;
  let outlets = data.outlets;
  let maxUniqueForOutlets = data.maxUniqueForOutlets;
  data = data.data;
  let tbl = document.getElementById("ConsumptionTable");
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");

  th = document.createElement("th");
  th.innerHTML = "Brand Name";
  th.classList.add("text-center");
  headerRow.appendChild(th);

  let grandTotal = 0;
  let grandNetAmount = 0;
  let outletWiseTotal = {};
  let outletWiseNetamount = {};
  th = document.createElement("th");
  th.colSpan = 2;
  th.innerHTML = "Total";
  th.classList.add("text-center");
  headerRow.appendChild(th);

  outlets.forEach(element => {

    th = document.createElement("th");
    th.colSpan = 2;
    th.innerHTML = element; // populating outlet 
    th.classList.add("text-center");
    headerRow.appendChild(th);
    outletWiseTotal[element] = 0;
    data.forEach(el => {
      if (el.outlet == element && el.brandname !== "NA") { //taking brandname which do not have bradname===NA
        outletWiseTotal[element] += parseInt(el.netamount); //here i am calculating the outletWiseTotal where transcationType==TransferIn

      }
      if (el.outlet == element && el.brandname == "NA" && el.transactionType == "Sales") { //taking brandname which do not have bradname===NA
        outletWiseNetamount[element] = parseInt(el.netamount) || 0


      }

    });
    grandTotal += outletWiseTotal[element]; //then calculating grand total to populate it into  Total column at grn entery

    grandNetAmount += outletWiseNetamount[element] || 0

  });

  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "";
  headerRow.appendChild(th);

  for (let i = 0; i < outlets.length + 1; i++) {
    th = document.createElement("th");
    th.innerHTML = "Sales";
    th.classList.add("text-center");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "Grn Entery";
    th.classList.add("text-center");
    headerRow.appendChild(th);
  }

  headerRow.insertBefore(th, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  headerRow = document.createElement("tr");
  let td = document.createElement("th");
  td.innerHTML = "Total";
  td.classList.add("text-center");
  headerRow.appendChild(td);
  let el1 = 0;
  outlets.forEach(element => {

    td = document.createElement("th");
    td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);
    if (element.outlet == element) {
      el1 = element.netAmount;
    }
    td = document.createElement("th");
    td.innerHTML = outletWiseNetamount[element].toLocaleString('en-IN') || 0;
    td.classList.add("text-right");
    headerRow.appendChild(td);

  });
  td = document.createElement("th");
  td.innerHTML = grandNetAmount.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);

  td = document.createElement("th");
  td.innerHTML = grandTotal.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");

  Object.keys(maxUniqueForOutlets).forEach(function(element) { // rendering brand name
    let row = document.createElement("tr");
    row.classList.add('header');
    td = document.createElement("td");
    td.innerHTML = '<span><i class="fas fa-plus" id="test"></i>&nbsp</span>' + element; //creating plus font icon to make click happen

    row.appendChild(td);


    let total = 0;
    let totalBCount = 0;
    outlets.forEach(outlet => {
      let el = 0;
      let bc = 0;
      data.forEach(d => {
        if (d.brandname == element && d.outlet == outlet) {
          total += parseInt(d.netamount);
          el = d.netamount; //calculating outlet wise net amount

        }

      });


      olWiseSalesPercentage = (el / outletWiseTotal[outlet]) * 100 || 0
      td = document.createElement("td");
      td.innerHTML = el.toLocaleString('en-IN'); // by this one i am populating outlet wise values for bramd but it is displaying wrong values

      td.classList.add("text-right");
      row.appendChild(td);
      td = document.createElement("td");
      td.innerHTML = olWiseSalesPercentage.toFixed(2) + "%";

      td.classList.add("text-right");
      row.appendChild(td);
    });

    totalSalesPercentage = (total / grandTotal) * 100 //here doing some calculations
    const totalSalesPercentageFix = totalSalesPercentage.toFixed(2) + "%"
    td = document.createElement("td");
    td.innerHTML = totalSalesPercentageFix;
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);

    td = document.createElement("td");
    td.innerHTML = total.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);





    tbody.appendChild(row);


    maxUniqueForOutlets[element].forEach(function(k) { //this one is populating itemwise values but it starts with Total column Total column will populate Total 
      let rowChildren = document.createElement("tr");
      const filteredData = data.filter(a => a.itemname === k);
      if (filteredData.length > 0) {
        var tdNew = document.createElement("td");
        tdNew.innerHTML = filteredData[0].netamount;
        tdNew.classList.add("text-right");
        var tdName = document.createElement("td");
        tdName.innerHTML = filteredData[0].itemname;
        tdName.classList.add("text-left");
        rowChildren.appendChild(tdName);
        rowChildren.appendChild(tdNew);
        outlets.forEach(outlet => {
          const emptyCell = document.createElement('td'); //this i am creating staticly how can i create this statically as here i have 3 outlets so i am creating 
          emptyCell.innerHTML = "12";
          emptyCell.classList.add("text-right");
          rowChildren.appendChild(emptyCell);

          const emptyCell1 = document.createElement('td');
          emptyCell1.innerHTML = "13";
          emptyCell1.classList.add("text-right");
          rowChildren.appendChild(emptyCell1);


          tbody.appendChild(rowChildren);
        });
      }
    })
  });

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


var ua = navigator.userAgent,
  event = (ua.match(/iPad/i)) ? "touchstart" : "click";
$('.table .header .fa-plus').on(event, function() {
  $(this).closest('.header').toggleClass("active", "").nextUntil('.header').css('display', function(i, v) {
    return this.style.display === 'table-row' ? 'none' : 'table-row';
  });
});

#test {
  color: green;
  cursor: pointer;
}

<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">
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div align="center" class="table table-responsive">
  <table id="ConsumptionTable"></table>
</div>

私は他のアプローチを試しました。ユーザーが任意のブランドをクリックしてAjax呼び出しを行い、そのブランド名に基づいてクエリを実行してデータを取得したときに、拡張機能を取得できませんでした。

これが、データを一度に取得し、それを使ってテーブルを作成するための最良のアプローチであることに気付きました。私はそれを正しくするのに苦労しています

ダイナミックコードワーキングプロセス

現在、私はBrand Name、Grn Entery、Salesのパーセンテージで表した販売データを持っています。grnをその列の総grnで割って100で割って計算しています
したがって、私の場合、ユーザーがplusであるブランド名のアイコンをクリックすると、そのブランドのすべてのアイテム名を含む行が展開され、テーブルの構造全体がbrandnameの場合と同じになり、すべてのアイテム名に従ってgrn計算が行われます。、現在はブランド名の通り

編集/更新

私はいくつかの問題を抱えています：

まず、このコードを使用して、ブランド名とアイテム名を取得していますが、NAも取得しています。フィルターで除外しようとしましたが、成功しませんでした。私のスニペットを確認してください。そこですべての行にコメントしました。
transactiontype：salesとitemnameがあり、brandname = NAがある場合、ヘッダーにこれらの値を販売値として入力します。これらの値は、パーセンテージの計算とは関係ありません
ブランド内のアイテムにデータを入力するとき、動的に実行する必要があります。試しましたが、取得できませんでした

javascriptjqueryhtmlhtml-tablebootstrap-4

2019/04/30manish thakur

ほぼ純粋なJavaScriptソリューションの例は、ヘッダーの部分を関数に少し分解し、詳細行の関数でヘッダーを調べて金額を表示します。これを示すためにアイテムを追加しました。

これを実行すると、上部のメモを展開して、私が行った詳細なメモを表示できます。（大きな青いボタンをクリックします）

/*jshint esversion: 6 */

var rawdata = [{
    "outlet": "JAYANAGAR",
    "brandname": "Bakery FG",
    "itemname": "Khara Boondhi-L",
    "transactionType": "TransferIn",
    "netamount": 980
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Bakery FG",
    "itemname": "Samosa-L",
    "transactionType": "TransferIn",
    "netamount": 130
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Bakery FG",
    "itemname": "Corn Flakes Masala-L",
    "transactionType": "TransferIn",
    "netamount": 500
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Pastry & Cake FG",
    "itemname": "Plum Cake 250gm",
    "transactionType": "TransferIn",
    "netamount": 110
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Pastry & Cake FG",
    "itemname": "Butterscotch Cake",
    "transactionType": "TransferIn",
    "netamount": 720
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Pastry & Cake FG",
    "itemname": "Chocolate chips cake",
    "transactionType": "TransferIn",
    "netamount": 40000
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Pastry & Cake FG",
    "itemname": "Mango Delight Cake",
    "transactionType": "TransferIn",
    "netamount": 14000
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Pastry & Cake FG",
    "itemname": "Almond Honey Chocolate Cake",
    "transactionType": "TransferIn",
    "netamount": 500
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Pastry & Cake FG",
    "itemname": "Peach Cake",
    "transactionType": "TransferIn",
    "netamount": 5500
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Pastry & Cake FG",
    "itemname": "Black Forest Cake",
    "transactionType": "TransferIn",
    "netamount": 1000
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Chocolate Crazy Boom",
    "transactionType": "TransferIn",
    "netamount": 2360
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Hot Chocolate Fudge",
    "transactionType": "TransferIn",
    "netamount": 2340
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Chocolate Sugar Free Ice-Cream",
    "transactionType": "TransferIn",
    "netamount": 1000
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Kesar Badam Falooda",
    "transactionType": "TransferIn",
    "netamount": 4430
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Strawberry Ice-cream",
    "transactionType": "TransferIn",
    "netamount": 1231
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "TOP- Chocochips",
    "transactionType": "TransferIn",
    "netamount": 2200
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Cheese Cake Ice-Cream",
    "transactionType": "TransferIn",
    "netamount": 500
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Sundae Large",
    "transactionType": "TransferIn",
    "netamount": 2350
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Mango Ice-cream",
    "transactionType": "TransferIn",
    "netamount": 8000
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "TOP- Shooting Star",
    "transactionType": "TransferIn",
    "netamount": 2360
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Ice Blue Sundae",
    "transactionType": "TransferIn",
    "netamount": 2340
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Creamy Litchi Boom",
    "transactionType": "TransferIn",
    "netamount": 2200
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Cookies Ice-cream",
    "transactionType": "TransferIn",
    "netamount": 7000
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "TOP- Wafer",
    "transactionType": "TransferIn",
    "netamount": 88000
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Litchi cherry Sundae",
    "transactionType": "TransferIn",
    "netamount": 2440
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Peach Malaba",
    "transactionType": "TransferIn",
    "netamount": 2230
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "Ice Cream FG",
    "itemname": "Cherry Mania Ice-Cream",
    "transactionType": "TransferIn",
    "netamount": 2700
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "North Indian FG",
    "itemname": "Fruit Mixture",
    "transactionType": "TransferIn",
    "netamount": 324
  },
  {
    "outlet": "MALLESHWARAM",
    "brandname": "My Pie",
    "itemname": "Cherry Pie",
    "transactionType": "TransferIn",
    "netamount": 324
  },
  {
    "outlet": "JAYANAGAR",
    "brandname": "NA",
    "itemname": "NA",
    "transactionType": "Sales",
    "netamount": 476426
  },
  {
    "outlet": "KOLAR",
    "brandname": "NA",
    "itemname": "NA",
    "transactionType": "Sales",
    "netamount": 115313
  },
  {
    "outlet": "MALLESHWARAM",
    "brandname": "NA",
    "itemname": "NA",
    "transactionType": "Sales",
    "netamount": 92141
  }
];

// basic functions, work even in old browsers like ie6
var myApp = myApp || {};
myApp.funcs = {
  indexOf: function(myArray, searchTerm, property) {
    for (var i = 0; i < myArray.length; i++) {
      if (myArray[i][property] === searchTerm) return i;
    }
    return -1;
  },
  indexAllOf: function(myArray, searchTerm, property) {
    var ai = [];
    for (var i = 0; i < myArray.length; i++) {
      if (myArray[i][property] === searchTerm) ai.Push(i);
    }
    return ai;
  },
  lookup: function(myArray, searchTerm, property, firstOnly) {
    var found = [];
    var i = myArray.length;
    while (i--) {
      if (myArray[i][property] === searchTerm) {
        found.Push(myArray[i]);
        if (firstOnly) break; //if only the first 
      }
    }
    return found;
  },
  exclude: function(myArray, searchTerm, property, firstOnly = false) {
    var found = [];
    var i = myArray.length;
    while (i--) {
      if (myArray[i][property] !== searchTerm) {
        found.Push(myArray[i]);
        if (firstOnly) break; //if only the first 
      }
    }
    return found;
  },
  lookupAll: function(myArray, searchTerm, property) {
    return this.lookup(myArray, searchTerm, property, false);
  },
  arrSum: function(arr, selectorProp, selectorValue, numProp) {
    // get the summary (total) of any object array, assumes number
    function isSumMatch(item, index, arr) {
      return item[1][selectorProp] == selectorValue;
    }
    const arrSum = Object.entries(arr)
      .filter(isSumMatch)
      .map(item => item[1][numProp])
      .reduce((partial_sum, a) => partial_sum + a, 0);
    return arrSum;
  }
};
myApp.data = myApp.data || {
  items: rawdata
};
// could also do:
//myApp.data = myApp.data || {};
//myApp.data.items = myApp.data.items || rawdata;

// add a function, could be in above also
myApp.funcs.formatData = function(data) {
  let brandnames = [];
  let itemnames = [];
  let outlets = [];
  data.forEach(element => {
    //taking brandname which do not have bradname===NA
    if (brandnames.indexOf(element.brandname) == -1 && (element.brandname) !== "NA") {
      brandnames.Push(element.brandname);
    }
    //taking itemname which do not have bradname===NA
    if (itemnames.indexOf(element.itemname) == -1 && (element.itemname) !== "NA") {
      itemnames.Push(element.itemname);
    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.Push(element.outlet);
    }
  });
  return {
    //data: data,
    brandnames: brandnames,
    itemnames: itemnames,
    outlets: outlets,
  };
};

let renderHeader = function(data, targetTable) {
  let headId = targetTable.id + "-theadid";
  let thead = document.createElement("thead");
  thead.setAttribute("id", headId);
  let headerRow = document.createElement("tr");
  let headerInst = 0;
  let rowClass = headId + "-" + headerInst;
  headerRow.setAttribute("id", headId);
  headerRow.classList.add(rowClass);
  let th = document.createElement("th");
  // first header row
  th = document.createElement("th");
  th.innerHTML = "Brand Name";
  th.classList.add("text-center");
  headerRow.appendChild(th);

  th = document.createElement("th");
  th.colSpan = 2;
  th.innerHTML = "Total";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  // first header row - outlets names
  data.formatedData.outlets.forEach(outlet => {
    th = document.createElement("th");
    th.colSpan = 2;
    th.setAttribute("data-outlet", outlet);
    th.innerHTML = outlet; // populating outlet 
    th.classList.add("text-center");
    headerRow.appendChild(th);
  });
  thead.appendChild(headerRow);

  /* entery header row */
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "";
  headerRow.appendChild(th);
  let i = 0;
  // entery header row
  for (i; i < data.formatedData.outlets.length + 1; i++) {
    th = document.createElement("th");
    th.innerHTML = "Sales";
    th.classList.add("text-center");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "Grn Entery";
    th.classList.add("text-center");
    headerRow.appendChild(th);
  }
  thead.appendChild(headerRow);
  let oh = targetTable.getElementsByTagName('thead')[0];
  oh.parentNode.replaceChild(thead, oh);
  myApp.data.origHead = targetTable.getElementsByTagName('thead')[0];
  return headId;
};

let renderGrandTotal = function(data, targetTable, origHead) {
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "Total";
  th.classList.add("text-center");
  headerRow.appendChild(th);

  let el1 = 0;
  data.formatedData.outlets.forEach(element => {
    th = document.createElement("th");
    th.innerHTML = data.outletWiseTotal[element].toLocaleString('en-IN');
    th.classList.add("text-right");
    headerRow.appendChild(th);
    if (element.outlet == element) {
      el1 = element.netAmount;
    }
    th = document.createElement("th");
    th.innerHTML = data.outletWiseNetamount[element].toLocaleString('en-IN') || 0;
    th.classList.add("text-right");
    headerRow.appendChild(th);
  });
  th = document.createElement("th");
  th.innerHTML = data.grandNetAmount.toLocaleString('en-IN');
  th.classList.add("text-right");
  headerRow.insertBefore(th, headerRow.children[1]);

  th = document.createElement("th");
  th.innerHTML = data.grandTotal.toLocaleString('en-IN');
  th.classList.add("text-right");
  headerRow.insertBefore(th, headerRow.children[1]);
  origHead.appendChild(headerRow);
};
let getTotals = function(data) {
  data.outletWiseTotal = {};
  data.outletWiseNetamount = {};
  let na = "NA";
  let bn = "brandname";
  let num = 'netamount';
  let notJustOne = false;
  data.grandTotal = myApp.funcs.arrSum(myApp.funcs.exclude(data.items, na, bn, notJustOne), 'transactionType', 'TransferIn', num);
  data.grandNetAmount = myApp.funcs.arrSum(myApp.funcs.lookupAll(data.items, "NA", bn), 'transactionType', "Sales", num);
  data.formatedData.outlets.forEach(element => {
    data.outletWiseTotal[element] = 0;
    let myOutlet = myApp.funcs.lookupAll(data.items, element, "outlet");
    let notNA = myApp.funcs.exclude(myOutlet, na, bn);
    let justNA = myApp.funcs.lookupAll(myOutlet, na, bn);
    data.outletWiseTotal[element] = myApp.funcs.arrSum(notNA, 'outlet', element, num);
    data.outletWiseNetamount[element] = myApp.funcs.arrSum(justNA, 'transactionType', "Sales", num);
  });
  return data;
};

let findHeader = function(origHead, searchText) {
  let headers = origHead.getElementsByTagName("tr")[0]
    .getElementsByTagName("th");

  let found;
  let i = 0;
  for (i; i < headers.length; i++) {
    if (headers[i].dataset.outlet == searchText) {
      found = headers[i];
      break;
    }
  }

  return {
    head: headers,
    index: i,
    outletHeader: found
  };
};

function getHeadByCell(headerRow, cell) {
  var idx = $(cell).index(),
    th,
    th_colSpan = 0;
  let i = 0;
  for (i; i < headerRow.cells.length; i++) {
    th = headerRow.cells[i];
    th_colSpan += th.colSpan;
    let isThing = (th_colSpan >= (idx + cell.colSpan));
    if (th_colSpan >= (idx + cell.colSpan)) {
      break;
    }
  }
  return th;
}

let renderBrandDetailRow = function(rowdata, tblBody, brandname, brandClass) {
  // render stuff like Bakery FG
  let r = 0;
  for (r; r < rowdata.length; r++) {
    let row = document.createElement("tr");
    row.classList.add("collapse", brandClass);
    let td = document.createElement("td");
    td.classList.add("text-center");
    td.innerHTML = brandname;
    row.appendChild(td);
    // item name
    td = document.createElement("td");
    td.classList.add("text-center");
    td.colSpan = 2;
    td.innerHTML = rowdata[r]["itemname"];
    row.appendChild(td);
    // punch in empty column data first
    let groupOutletsCount = myApp.data.formatedData.outlets.length;
    for (let c = 0; c < (groupOutletsCount * 2); c++) {
      td = document.createElement("td");
      td.classList.add("text-right");
      row.appendChild(td);
    }
    let origHead = myApp.data.origHead;
    let found = findHeader(origHead, rowdata[r].outlet);
    let testRow = origHead.getElementsByTagName("tr")[1];
    let fr = 0;
    for (fr; fr < testRow.getElementsByTagName("th").length; fr++) {
      let mycell = testRow.getElementsByTagName("th")[fr];
      let ath = getHeadByCell(origHead.getElementsByTagName("tr")[0], mycell);
      if (ath == found.outletHeader) break;
    }
    // now we have the header that matches, put the data in the right place
    row.getElementsByTagName("td")[fr].innerHTML = rowdata[r]["netamount"].toLocaleString('en-IN');
    tblBody.appendChild(row);
  }
};
let renderTable = function(data) {
  let tbl = document.getElementById("ConsumptionTable");
  tbl.classList.add("table", "table-striped", "table-bordered", "table-hover");
  let headId = renderHeader(data, tbl);
  let origHead = document.getElementById(headId);
  let tbody = document.createElement("tbody");

  let headerInst = 0;
  let rowClass = headId + "-" + headerInst;
  renderGrandTotal(data, tbl, origHead);
  let collapseClass = 0;
  data.formatedData.brandnames.forEach(element => {
    let brandSum = myApp.funcs.arrSum(data.items, 'brandname', element, "netamount");
    let row = document.createElement("tr");
    let td = document.createElement("td");
    let brandClass = "multi-collapse-" + collapseClass;
    td.innerHTML = '<span><i class="fas fa-plus expand-child-group" data-toggle="collapse" data-target="' + '.' + brandClass + '"></i>&nbsp</span> ' + element;
    row.appendChild(td);
    data.formatedData.outlets.forEach(outlet => {
      let outletSum = myApp.funcs.arrSum(myApp.data.items, 'outlet', outlet, 'netamount');
      data.olWiseSalesPercentage = (brandSum / outletSum) * 100 || 0;
      td = document.createElement("td");
      td.innerHTML = brandSum.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);
      td = document.createElement("td");
      td.innerHTML = data.olWiseSalesPercentage.toFixed(2) + "%";
      td.classList.add("text-right");
      row.appendChild(td);
    });
    data.totalSalesPercentage = (brandSum / data.grandTotal) * 100;
    const totalSalesPercentageFix = data.totalSalesPercentage.toFixed(2) + "%";
    td = document.createElement("td");
    td.innerHTML = totalSalesPercentageFix;
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);

    td = document.createElement("td");
    td.innerHTML = brandSum.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);
    tbody.appendChild(row);
    let brandData = myApp.funcs.lookupAll(myApp.data.items, element, 'brandname');
    renderBrandDetailRow(brandData, tbody, element, brandClass);
    collapseClass++;
  });
  tbl.appendChild(tbody);
};

$('#things-i-did').find('.list-group').toggleClass('hidden', true);
myApp.data.formatedData = myApp.funcs.formatData(myApp.data.items);
getTotals(myApp.data);
renderTable(myApp.data);

let cttbl = document.getElementById('ConsumptionTable');
cttbl.addEventListener('click', function(event) {
  let myExp = "expand-child-group";// detail row class
  if (event.target.classList.contains(myExp)) {
    let myAttr = event.target.dataset.target;
    //console.log(myAttr);
  }
}, false);

.expand-child-group {
  color: green;
  cursor: pointer;
}

.identify-me {
  background-color: Lime;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

<div id="things-i-did">
  <h5>Things I did: <button class="btn btn-primary btn-sm" type="button" data-toggle="collapse" data-target="#collapseChanges" aria-expanded="false" aria-controls="collapseChanges">
    Toggle changes visible
  </button></h5>
  <div id="collapseChanges" class="collapse">
    <ul class="list-group">
      <li class="list-group-item">Added this silly toggle list</li>
      <li class="list-group-item">Added a lot of missing semi-colons</li>
      <li class="list-group-item">Remove obvious comments "do calculation"</li>
      <li class="list-group-item">Consolidate the: <code>td.classlist.add("my-class");
td.classlist.add("my-other-class");</code> to an array/list: <code>td.classlist.add("my-class","my-other-class");</code></li>
      <li class="list-group-item">Several "undefined" variables used, removed or defined with <code>let mything =</code></li>
      <li class="list-group-item">Clarify several variables used</li>
      <li class="list-group-item">Remove several "unused" variables</li>
      <li class="list-group-item">added base to parseInt functions</li>
      <li class="list-group-item">Used Event listener for click <code>cttbl.addEventListener('click', function(event) {</code></li>
      <li class="list-group-item">change <code>td = something</code> to <code>th = something</code> variable to clarify intent</li>
      <li class="list-group-item">Removed <code>id="test"</code>, duplicate ID's are invalid</li>
      <li class="list-group-item">Created an object <code>var myApp = myApp || {};</code> to hold all the stuff <i>(function, calculation data, globals)</i> and avoid global variables</li>
      <li class="list-group-item">functions for each detail row under proper header</li>
    </ul>
  </div>
</div>
<div align="center" class="table table-responsive">
  <table id="ConsumptionTable">
    <thead></thead>
  </table>
</div>

2019/05/11Mark Schultheiss