那些遇到过的问题

如何使HTML表点击扩展？

man*_*kur 13 html javascript jquery html-table bootstrap-4

我在JavaScript的帮助下呈现HTML表。我已经成功地制作了表格，但是现在我有一个要求可以连续显示一些新数据，例如单击“展开”行

表功能：

  • 我正在填充表格某些品牌明智的做法是每个品牌内部都有一些项目，当点击该品牌时我想显示这些项目
  • 我几乎创建了表格，但无法创建可扩展行
  • 我的专栏之一也在填充错误的数据

在我的代码中，我注释了所有行，我在那一行中正在做什么

我面临的问题

  • 我已作了评论，我计算netamount来填充里面的线tbody作为GRN entery品牌的睿智但造成问题的

我创建了两个代码段，一个是完整的静态HTML，就像我想要的那样，另一个是显示我的工作。

我在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>
Run Code Online (Sandbox Code Playgroud)

我想创建类似上面的代码片段，但是它会在单击行时扩展。当用户单击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

NBa*_*aua 6

我建议您使用DataTables。

DataTables提供了丰富的API，可用于呈现行数据，显示/隐藏列，搜索/过滤器，页面调度等。可以通过jQuery UI或Bootstrap或您自己的品牌设置样式。与编写自己的表显示逻辑相反，DataTables库是免费使用的并且非常灵活。

请参阅：https： //datatables.net/examples/api/row_details.html

Mun*_*nna 6

这样做，遵循 DRY 和模块化结构，使其更具可读性和可维护性。 

class CellEntry {
  constructor() {
    this.sum = 0;
    this.percentage = 0;
  }
}

class OutletBasedRowEntry {
  constructor() {
    this.cells = {
      Total: new CellEntry()
    };
    this.childRows = {};
  }
  add(entry) {
    this.cells.Total.sum += entry.netamount;
    this.getOrCreateCellById(entry.outlet).sum += entry.netamount;
  }
  getOrCreateChildRowById(id) {
    if (!this.childRows[id]) this.childRows[id] = new OutletBasedRowEntry();
    return this.childRows[id];
  }
  getOrCreateCellById(id) {
    if (!this.cells[id]) this.cells[id] = new CellEntry();
    return this.cells[id];
  }
}

function tabulizeData(data) {
  let TotalRowEntry = new OutletBasedRowEntry();
  data.forEach(entry => {
    TotalRowEntry.add(entry);
    TotalRowEntry.getOrCreateChildRowById(entry.brandname).add(entry);
    TotalRowEntry.getOrCreateChildRowById(entry.brandname).getOrCreateChildRowById(entry.itemname).add(entry);
  });
  renderTable(TotalRowEntry);
}

function renderTable(TotalRowEntry) {
  let $table = $('#ConsumptionTable');
  let $thead = $('<thead><tr><th>Brand Name</th></tr><tr><th></th></tr><tr><th>Total</th></tr><thead>'),
    $tbody = $('<tbody>');
  let $headingRows = $thead.find('tr');

  function addCellEntriesToRow(rowEntry, $row) {
    for (let cellName in TotalRowEntry.cells) {
      let cellEntry = rowEntry.getOrCreateCellById(cellName);
      $('<td>').html(cellEntry.sum).appendTo($row);
      $('<td>').html(cellEntry.percentage).appendTo($row);
    }
  }

  $.each(TotalRowEntry.cells, function(cellName, cellEntry) {
    $('<th colspan=2>').html(cellName).appendTo($headingRows.eq(0));
    $('<th>Grn Entery</th>').appendTo($headingRows.eq(1));
    $('<th>Sales</th>').appendTo($headingRows.eq(1));
    $('<th>').html(cellEntry.sum).appendTo($headingRows.eq(2));
    $('<th>').html(cellEntry.percentage).appendTo($headingRows.eq(2));
  });

  $.each(TotalRowEntry.childRows, function(brandName, rowEntry) {
    let $row = $('<tr>').appendTo($tbody);
    let rowId = 'row' + $row.index();
    let firstCell = $('<td><i class="fas fa-plus add-btn" data-toggle="collapse" data-target=".' + rowId + '"></i>' + brandName + '</td>').appendTo($row);
    addCellEntriesToRow(rowEntry, $row);
    $.each(rowEntry.childRows, function(itemName, rowEntry) {
      $row = $('<tr>').addClass('collapse ' + rowId).appendTo($tbody);
      $('<td>').html(itemName).appendTo($row);
      addCellEntriesToRow(rowEntry, $row);
    });
  });

  $thead.appendTo($table);
  $tbody.appendTo($table);
}

tabulizeData([{
    "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
  }
]);
Run Code Online (Sandbox Code Playgroud) 
.add-btn {
  color: green;
  cursor: pointer;
  margin-right: 6px;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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">
<div align="center" class="table table-responsive">
  <table id="ConsumptionTable" class="table table-responsive table-hover table-bordered"></table>
</div>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

3365 次

最近记录：

7 年 前
使用JQuery扩展/折叠表行 61
表格行可以展开和关闭吗？ 27
更多相关链接
相关归档
Facebook如何禁用浏览器的集成开发人员工具？ 1652
在HTML中嵌入PDF的推荐方法？ 1128
是否可以使用node.js创建桌面应用程序？ 58
如何退出setInterval 54
使用JQuery绑定"窗口"的"焦点"和"模糊"功能,在IE中不起作用 46
我可以在另一个col内部使用Bootstrap col吗？ 32
点击输入时阻止点击动作 23
在iframe的父窗口中触发事件 22
如何在v4.0中为select2元素添加类 22
首先加载低分辨率背景图像,然后加载高分辨率背景图像 21
难疑归档
.prop()vs .attr() 2249
在Python中获取列表的最后一个元素 1871
'real','user'和'sys'在time(1)的输出中意味着什么？ 1622
我怎样才能找到带有Mathematica的Waldo？ 1538
抽象函数和虚函数有什么区别？ 1526
如何比较两个不同分支的文件？ 1430
如何在HTTP POST请求中发送参数？ 1396
为什么Dictionary优先于Hashtable？ 1348
如何从另一个分支中获取一个文件 1154
自定义HTTP标头:命名约定 1051
Copyright Info

© Copyright 2013-2021 admin@qa.1r1g.com

如未特别说明，本网站的内容使用如下协议:
Creative Commons Atution-NonCommercial-ShareAlike 4.0 International license.

用以下方式浏览
参考资料
回到顶部
网安备44200002443738
粤ICP备19038133号