【发布时间】：2019-04-30 10:54:02
【问题描述】：
我在 JavaScript 的帮助下呈现 HTML 表格。我已经成功制作了表格，但现在我有一个要求是在一行中显示一些新数据，比如点击展开行
表格功能：
- 我正在填充我的表一些品牌明智的每个品牌都有一些项目，我想在点击品牌时显示这些项目
- 我几乎创建了表格，但无法创建可扩展行
- 我的一列也填充了错误的数据
在我的代码中，我已经注释了我在哪一行所做的所有行
我面临的问题
- 我已经评论了我计算 netamount 以填充
tbody为GRN entery品牌明智的行，但这会导致问题
我创建了两个代码 sn-ps，一个是我想要的完全静态 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> </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> </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> </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> </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>我想创建类似于上面的 sn-p 的东西，但它会在单击行时扩展。当用户点击plus 图标时，我想这样做，我figured out how to do。
我的 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> </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，我试图将其过滤掉但没有成功。请检查我的 sn-p，我已经评论了那里的所有行。
当存在 transactiontype:sales 和 itemname 和 brandname=
NA时，我将这些值填充到标题中作为销售值，它们与计算百分比没有任何关系当我在那里填充品牌内的项目时，我必须动态地进行我尝试过但没有得到它
【问题讨论】：
-
@RameshRajendran 谢谢，现在如果你能帮我一些代码，那会很有帮助
-
@NabeelShaikh 嘿，很好，我也创建了一个类似的 sn-p，但正如你所见，我正在使用 java-script 渲染我的表格，它是完全动态的，所以我被卡住了那里
-
看来 jquery 在这里没有做任何事情......
标签： javascript jquery html html-table bootstrap-4