Comment agrandir le tableau HTML au clic?
Je rend le tableau HTML à l'aide de JavaScript. J'ai créé le tableau avec succès, mais maintenant j'ai une exigence pour afficher de nouvelles données dans une ligne comme sur le clic agrandir la ligne
Fonctionnalité de table:
- Je remplis ma table. Pour chaque marque, chaque marque contient des éléments que je souhaite afficher lorsque la marque est cliquée.
- J'ai presque créé la table, mais je n'ai pas pu créer la ligne extensible
- Ma colonne contient également des données erronées
Dans mon code, j'ai commenté toutes les lignes ce que je fais à quelle ligne
Problèmes auxquels je suis confronté
- J'ai déjà commenté la ligne où je calcule le montant net à remplir à l'intérieur de
tbodycommeGRN enteryau niveau de la marque, mais cela pose problème
J'ai créé deux extraits de code, un au format HTML statique complet comme ce que je veux, et un second pour montrer ce que j'ai fait.
L'aide que j'ai trouvée sur 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>Je veux créer quelque chose comme l'extrait ci-dessus, mais son expansion en cliquant sur la ligne. Je veux le faire lorsque l'utilisateur clique sur l'icône plus, ce que j'ai compris comment faire .
Mon code dynamique avec des données 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>J'ai essayé l'autre approche, qui était lorsque l'utilisateur clique sur une marque, j'effectuais un appel Ajax et exécutais la requête sur la base de ce nom de marque et obtenant des données, mais toujours pas en mesure d'obtenir la fonctionnalité d'extension.
Maintenant, je me suis rendu compte que c'est la meilleure approche pour obtenir les données à la fois, puis créer un tableau avec cela; J'ai du mal à bien faire les choses
Processus de travail du code dynamique
- Actuellement, j'ai une table avec
Brand Name,Grn Entery,SalesDonnées du corps de vente qui sont en pourcentage Je les calcule en divisantgrnpar Total grn de cette colonne et en les divisant par 100 - Ainsi, lorsque l'utilisateur clique sur l'icône d'un nom de marque qui est
plusdans mon cas, je souhaite développer des lignes avec tous les noms d'élément de cette marque et la structure entière du tableau sera la même que pourbrandnamesage , le calcul du grn sera tout en fonction du nom de l'article, actuellement selon le nom de la marque
Modifier/mettre à jour
J'ai des problèmes:
Tout d'abord, en utilisant ce code, j'obtiens des noms de marque et des noms d'articles, mais cela prend également NA, j'ai essayé de le filtrer, mais je n'y suis pas parvenu. Veuillez vérifier mon extrait, j'ai commenté toutes les lignes.
quand il y a un type de transaction: sales et itemname et brandname =
NAalors je remplis ces valeurs dans l'en-tête comme valeur de vente, elles n'ont aucune relation avec le calcul du pourcentagequand je remplis l'article à l'intérieur de la marque, je dois le faire dynamiquement, j'ai essayé mais je n'ai pas réussi
Presque un exemple de solution JavaScript pure décomposant un peu les parties des en-têtes en fonctions, des fonctions pour les lignes de détail où il recherche l'en-tête pour placer les montants - j'ai ajouté un élément pour le démontrer.
Si vous exécutez cela, vous pouvez développer les premières notes pour voir des notes détaillées des choses que j'ai faites. (cliquez sur le gros bouton bleu)
/*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> </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>