HTML动态表不显示下拉按钮
问题描述 投票：0回答：2
我有下降的HTML表格下来点击下拉列表中显示但对UI用户没有下拉按钮需要点击并选中它有砸下来
所以，我怎么可以添加表细胞按钮？
这里是我的代码
<div id="tbl"></div>
<ul id="contextMenu" class="dropdown-menu" role="menu">
<li><a href="#" class="link1">Report1</a></li>
<li><a href="#" class="Link2">Report2</a></li>
</ul>
$(window).load(function() {
$dropdown = $("#contextMenu");
$(".actionButton").click(function() {
//get row ID
//move dropdown menu
$(this).after($dropdown);
//update links
$(this).dropdown();
});
});
data1=[
{
"amount": 2808,
"hour": "5",
"outlet": "JAYANAGAR"
},
{
"amount": 37923,
"hour": "6",
"outlet": "JAYANAGAR"
},
{
"amount": 9052,
"hour": "6",
"outlet": "KOLAR"
},
{
"amount": 50527,
"hour": "7",
"outlet": "KOLAR"
},
{
"amount": 74615,
"hour": "7",
"outlet": "JAYANAGAR"
},
{
"amount": 5426,
"hour": "7",
"outlet": "MALLESHWARAM"
},
{
"amount": 63324,
"hour": "8",
"outlet": "KOLAR"
},
{
"amount": 117544,
"hour": "8",
"outlet": "JAYANAGAR"
},
{
"amount": 13468,
"hour": "8",
"outlet": "MALLESHWARAM"
},
{
"amount": 30209,
"hour": "9",
"outlet": "MALLESHWARAM"
},
{
"amount": 52757,
"hour": "9",
"outlet": "KOLAR"
},
{
"amount": 117462,
"hour": "9",
"outlet": "JAYANAGAR"
},
{
"amount": 24549,
"hour": "10",
"outlet": "KOLAR"
},
{
"amount": 116078,
"hour": "10",
"outlet": "JAYANAGAR"
},
{
"amount": 25947,
"hour": "10",
"outlet": "MALLESHWARAM"
},
{
"amount": 114416,
"hour": "11",
"outlet": "JAYANAGAR"
},
{
"amount": 31145,
"hour": "11",
"outlet": "MALLESHWARAM"
},
{
"amount": 12485,
"hour": "11",
"outlet": "KOLAR"
},
{
"amount": 137941,
"hour": "12",
"outlet": "JAYANAGAR"
},
{
"amount": 10133,
"hour": "12",
"outlet": "KOLAR"
},
{
"amount": 18576,
"hour": "12",
"outlet": "MALLESHWARAM"
},
{
"amount": 38092,
"hour": "13",
"outlet": "KOLAR"
},
{
"amount": 50742,
"hour": "13",
"outlet": "MALLESHWARAM"
},
{
"amount": 229840,
"hour": "13",
"outlet": "JAYANAGAR"
},
{
"amount": 56461,
"hour": "14",
"outlet": "MALLESHWARAM"
},
{
"amount": 248120,
"hour": "14",
"outlet": "JAYANAGAR"
},
{
"amount": 53381,
"hour": "14",
"outlet": "KOLAR"
},
{
"amount": 176758,
"hour": "15",
"outlet": "JAYANAGAR"
},
{
"amount": 24684,
"hour": "15",
"outlet": "KOLAR"
},
{
"amount": 45027,
"hour": "15",
"outlet": "MALLESHWARAM"
},
{
"amount": 24637,
"hour": "16",
"outlet": "KOLAR"
},
{
"amount": 141824,
"hour": "16",
"outlet": "JAYANAGAR"
},
{
"amount": 27328,
"hour": "16",
"outlet": "MALLESHWARAM"
},
{
"amount": 48356,
"hour": "17",
"outlet": "MALLESHWARAM"
},
{
"amount": 27359,
"hour": "17",
"outlet": "KOLAR"
},
{
"amount": 153281,
"hour": "17",
"outlet": "JAYANAGAR"
},
{
"amount": 24531,
"hour": "18",
"outlet": "KOLAR"
},
{
"amount": 161967,
"hour": "18",
"outlet": "JAYANAGAR"
},
{
"amount": 51463,
"hour": "18",
"outlet": "MALLESHWARAM"
},
{
"amount": 19577,
"hour": "19",
"outlet": "KOLAR"
},
{
"amount": 41405,
"hour": "19",
"outlet": "MALLESHWARAM"
},
{
"amount": 187858,
"hour": "19",
"outlet": "JAYANAGAR"
},
{
"amount": 34996,
"hour": "20",
"outlet": "MALLESHWARAM"
},
{
"amount": 21356,
"hour": "20",
"outlet": "KOLAR"
},
{
"amount": 177706,
"hour": "20",
"outlet": "JAYANAGAR"
},
{
"amount": 11272,
"hour": "21",
"outlet": "MALLESHWARAM"
},
{
"amount": 16796,
"hour": "21",
"outlet": "KOLAR"
},
{
"amount": 128191,
"hour": "21",
"outlet": "JAYANAGAR"
},
{
"amount": 14767,
"hour": "22",
"outlet": "JAYANAGAR"
},
{
"amount": 4424,
"hour": "22",
"outlet": "KOLAR"
}
]
data= [
{
"amount": 291589,
"billdate": "2018-08-01",
"outlet": "JAYANAGAR"
},
{
"amount": 58337,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM"
},
{
"amount": 65970,
"billdate": "2018-08-01",
"outlet": "KOLAR"
},
{
"amount": 296125,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR"
},
{
"amount": 56545,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM"
},
{
"amount": 72213,
"billdate": "2018-08-02",
"outlet": "KOLAR"
},
{
"amount": 346605,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR"
},
{
"amount": 62459,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM"
},
{
"amount": 65248,
"billdate": "2018-08-03",
"outlet": "KOLAR"
},
{
"amount": 518212,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR"
},
{
"amount": 104801,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM"
},
{
"amount": 138151,
"billdate": "2018-08-04",
"outlet": "KOLAR"
},
{
"amount": 628358,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR"
},
{
"amount": 115223,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM"
},
{
"amount": 134107,
"billdate": "2018-08-05",
"outlet": "KOLAR"
},
{
"amount": 177866,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR"
},
{
"amount": 66095,
"billdate": "2018-08-06",
"outlet": "KOLAR"
},
{
"amount": 284069,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR"
},
{
"amount": 58789,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM"
},
{
"amount": 67886,
"billdate": "2018-08-07",
"outlet": "KOLAR"
},
{
"amount": 313128,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR"
},
{
"amount": 59939,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM"
},
{
"amount": 68558,
"billdate": "2018-08-08",
"outlet": "KOLAR"
}
]
let formatData = function (data) {
let billdates = [];
let outlets = [];
data.forEach(element => {
if (billdates.indexOf(element.billdate) == -1) {
billdates.push(element.billdate);
}
if (outlets.indexOf(element.outlet) == -1) {
outlets.push(element.outlet);
}
});
return {
data: data,
billdates: billdates,
outlets: outlets,
};
};
let renderTable = function (data) {
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("tbl");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "Bill___Date";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let outletWiseTotal = {};
th = document.createElement("th");
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
data.forEach(el => {
if (el.outlet == element) {
outletWiseTotal[element] += parseInt(el.amount);
}
});
grandTotal += outletWiseTotal[element];
});
thead.appendChild(headerRow);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = outletWiseTotal[element];
th.classList.add("text-right"); //ol totals
headerRow.appendChild(th);
});
/* th = document.createElement("th");
a = document.createElement("a");
// th.innerHTML = "Action drop"; // removed
th.classList.add("text-center");
th.classList.add("dropdown");
a.classList.add("btn-default");
a.classList.add("actionButton");
// added
a.setAttribute("data-toggle", "dropdown");
a.innerHTML = "Action drop";
th.appendChild(a); // added
headerRow.appendChild(th); */
th = document.createElement("th");
th.innerHTML = grandTotal;
th.classList.add("text-right"); // grand total
/* console.log(grandTotal);*/
// headerRow.appendChild(th);
headerRow.insertBefore(th , headerRow.children[1] );
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element => {
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
outlets.forEach(outlet => {
let el = 0;
data.forEach(d => {
if (d.billdate == element && d.outlet == outlet) {
total += parseInt(d.amount);
el = d.amount;
}
});
/* td = document.createElement("td");
td.innerHTML = el; */
td = document.createElement("td");
a = document.createElement("a");
// th.innerHTML = "Action drop"; // removed
td.classList.add("text-right");
td.classList.add("dropdown");
a.classList.add("btn-default");
a.classList.add("actionButton");
// added
a.setAttribute("data-toggle", "dropdown");
a.innerHTML = el;
td.appendChild(a); // added
row.appendChild(td);
/* td.classList.add("text-right"); //oldata
row.appendChild(td); */
});
/*console.log("row is : " , row.children )*/
td = document.createElement("td");
td.innerHTML = total;
td.classList.add("text-right"); //column total
// row.appendChild(td);
row.insertBefore(td , row.children[1] );
tbody.appendChild(row);
});
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
let formatedData = formatData(data);
renderTable(formatedData);
我有下拉到Jayanagar的马勒斯瓦兰和科拉尔这只能说明链接这是不好的用户需求;我想表明，随着按钮。我做了正确的事情，但不知道我要去哪里错了。
2个回答
0
投票
投票
添加BTN类添加BTN-默认前
a.classList.add("btn");
a.classList.add("btn-default");
$(window).load(function() {
$dropdown = $("#contextMenu");
$(".actionButton").click(function() {
//get row ID
//move dropdown menu
$(this).after($dropdown);
//update links
$(this).dropdown();
});
});
data1=[
{
"amount": 2808,
"hour": "5",
"outlet": "JAYANAGAR"
},
{
"amount": 37923,
"hour": "6",
"outlet": "JAYANAGAR"
},
{
"amount": 9052,
"hour": "6",
"outlet": "KOLAR"
},
{
"amount": 50527,
"hour": "7",
"outlet": "KOLAR"
},
{
"amount": 74615,
"hour": "7",
"outlet": "JAYANAGAR"
},
{
"amount": 5426,
"hour": "7",
"outlet": "MALLESHWARAM"
},
{
"amount": 63324,
"hour": "8",
"outlet": "KOLAR"
},
{
"amount": 117544,
"hour": "8",
"outlet": "JAYANAGAR"
},
{
"amount": 13468,
"hour": "8",
"outlet": "MALLESHWARAM"
},
{
"amount": 30209,
"hour": "9",
"outlet": "MALLESHWARAM"
},
{
"amount": 52757,
"hour": "9",
"outlet": "KOLAR"
},
{
"amount": 117462,
"hour": "9",
"outlet": "JAYANAGAR"
},
{
"amount": 24549,
"hour": "10",
"outlet": "KOLAR"
},
{
"amount": 116078,
"hour": "10",
"outlet": "JAYANAGAR"
},
{
"amount": 25947,
"hour": "10",
"outlet": "MALLESHWARAM"
},
{
"amount": 114416,
"hour": "11",
"outlet": "JAYANAGAR"
},
{
"amount": 31145,
"hour": "11",
"outlet": "MALLESHWARAM"
},
{
"amount": 12485,
"hour": "11",
"outlet": "KOLAR"
},
{
"amount": 137941,
"hour": "12",
"outlet": "JAYANAGAR"
},
{
"amount": 10133,
"hour": "12",
"outlet": "KOLAR"
},
{
"amount": 18576,
"hour": "12",
"outlet": "MALLESHWARAM"
},
{
"amount": 38092,
"hour": "13",
"outlet": "KOLAR"
},
{
"amount": 50742,
"hour": "13",
"outlet": "MALLESHWARAM"
},
{
"amount": 229840,
"hour": "13",
"outlet": "JAYANAGAR"
},
{
"amount": 56461,
"hour": "14",
"outlet": "MALLESHWARAM"
},
{
"amount": 248120,
"hour": "14",
"outlet": "JAYANAGAR"
},
{
"amount": 53381,
"hour": "14",
"outlet": "KOLAR"
},
{
"amount": 176758,
"hour": "15",
"outlet": "JAYANAGAR"
},
{
"amount": 24684,
"hour": "15",
"outlet": "KOLAR"
},
{
"amount": 45027,
"hour": "15",
"outlet": "MALLESHWARAM"
},
{
"amount": 24637,
"hour": "16",
"outlet": "KOLAR"
},
{
"amount": 141824,
"hour": "16",
"outlet": "JAYANAGAR"
},
{
"amount": 27328,
"hour": "16",
"outlet": "MALLESHWARAM"
},
{
"amount": 48356,
"hour": "17",
"outlet": "MALLESHWARAM"
},
{
"amount": 27359,
"hour": "17",
"outlet": "KOLAR"
},
{
"amount": 153281,
"hour": "17",
"outlet": "JAYANAGAR"
},
{
"amount": 24531,
"hour": "18",
"outlet": "KOLAR"
},
{
"amount": 161967,
"hour": "18",
"outlet": "JAYANAGAR"
},
{
"amount": 51463,
"hour": "18",
"outlet": "MALLESHWARAM"
},
{
"amount": 19577,
"hour": "19",
"outlet": "KOLAR"
},
{
"amount": 41405,
"hour": "19",
"outlet": "MALLESHWARAM"
},
{
"amount": 187858,
"hour": "19",
"outlet": "JAYANAGAR"
},
{
"amount": 34996,
"hour": "20",
"outlet": "MALLESHWARAM"
},
{
"amount": 21356,
"hour": "20",
"outlet": "KOLAR"
},
{
"amount": 177706,
"hour": "20",
"outlet": "JAYANAGAR"
},
{
"amount": 11272,
"hour": "21",
"outlet": "MALLESHWARAM"
},
{
"amount": 16796,
"hour": "21",
"outlet": "KOLAR"
},
{
"amount": 128191,
"hour": "21",
"outlet": "JAYANAGAR"
},
{
"amount": 14767,
"hour": "22",
"outlet": "JAYANAGAR"
},
{
"amount": 4424,
"hour": "22",
"outlet": "KOLAR"
}
]
data= [
{
"amount": 291589,
"billdate": "2018-08-01",
"outlet": "JAYANAGAR"
},
{
"amount": 58337,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM"
},
{
"amount": 65970,
"billdate": "2018-08-01",
"outlet": "KOLAR"
},
{
"amount": 296125,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR"
},
{
"amount": 56545,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM"
},
{
"amount": 72213,
"billdate": "2018-08-02",
"outlet": "KOLAR"
},
{
"amount": 346605,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR"
},
{
"amount": 62459,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM"
},
{
"amount": 65248,
"billdate": "2018-08-03",
"outlet": "KOLAR"
},
{
"amount": 518212,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR"
},
{
"amount": 104801,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM"
},
{
"amount": 138151,
"billdate": "2018-08-04",
"outlet": "KOLAR"
},
{
"amount": 628358,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR"
},
{
"amount": 115223,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM"
},
{
"amount": 134107,
"billdate": "2018-08-05",
"outlet": "KOLAR"
},
{
"amount": 177866,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR"
},
{
"amount": 66095,
"billdate": "2018-08-06",
"outlet": "KOLAR"
},
{
"amount": 284069,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR"
},
{
"amount": 58789,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM"
},
{
"amount": 67886,
"billdate": "2018-08-07",
"outlet": "KOLAR"
},
{
"amount": 313128,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR"
},
{
"amount": 59939,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM"
},
{
"amount": 68558,
"billdate": "2018-08-08",
"outlet": "KOLAR"
}
]
let formatData = function (data) {
let billdates = [];
let outlets = [];
data.forEach(element => {
if (billdates.indexOf(element.billdate) == -1) {
billdates.push(element.billdate);
}
if (outlets.indexOf(element.outlet) == -1) {
outlets.push(element.outlet);
}
});
return {
data: data,
billdates: billdates,
outlets: outlets,
};
};
let renderTable = function (data) {
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("tbl");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "Bill___Date";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let outletWiseTotal = {};
th = document.createElement("th");
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
data.forEach(el => {
if (el.outlet == element) {
outletWiseTotal[element] += parseInt(el.amount);
}
});
grandTotal += outletWiseTotal[element];
});
thead.appendChild(headerRow);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = outletWiseTotal[element];
th.classList.add("text-right"); //ol totals
headerRow.appendChild(th);
});
/* th = document.createElement("th");
a = document.createElement("a");
// th.innerHTML = "Action drop"; // removed
th.classList.add("text-center");
th.classList.add("dropdown");
a.classList.add("btn-default");
a.classList.add("actionButton");
// added
a.setAttribute("data-toggle", "dropdown");
a.innerHTML = "Action drop";
th.appendChild(a); // added
headerRow.appendChild(th); */
th = document.createElement("th");
th.innerHTML = grandTotal;
th.classList.add("text-right"); // grand total
/* console.log(grandTotal);*/
// headerRow.appendChild(th);
headerRow.insertBefore(th , headerRow.children[1] );
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element => {
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
outlets.forEach(outlet => {
let el = 0;
data.forEach(d => {
if (d.billdate == element && d.outlet == outlet) {
total += parseInt(d.amount);
el = d.amount;
}
});
/* td = document.createElement("td");
td.innerHTML = el; */
td = document.createElement("td");
a = document.createElement("a");
// th.innerHTML = "Action drop"; // removed
td.classList.add("text-right");
td.classList.add("dropdown");
a.classList.add("btn");
a.classList.add("btn-default");
a.classList.add("actionButton");
// added
a.setAttribute("data-toggle", "dropdown");
a.innerHTML = el;
td.appendChild(a); // added
row.appendChild(td);
/* td.classList.add("text-right"); //oldata
row.appendChild(td); */
});
/*console.log("row is : " , row.children )*/
td = document.createElement("td");
td.innerHTML = total;
td.classList.add("text-right"); //column total
// row.appendChild(td);
row.insertBefore(td , row.children[1] );
tbody.appendChild(row);
});
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
let formatedData = formatData(data);
renderTable(formatedData);.btn {
min-width: 100px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<script
type="text/javascript"
src="http://code.jquery.com/jquery-2.0.2.js"
></script>
<link
rel="stylesheet"
type="text/css"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
/>
<script
type="text/javascript"
src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"
></script>
<link
rel="stylesheet"
type="text/css"
href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"
/>
</head>
<body>
<div id="tbl"></div>
<ul id="contextMenu" class="dropdown-menu" role="menu">
<li><a href="#" class="link1">go to next</a></li>
<li><a href="#" class="Link2">next</a></li>
</ul>
</body>
</html>0
投票
投票
我希望这样的事情可能会帮助你。
$(window).load(function() {
$dropdown = $("#contextMenu");
$(".actionButton").click(function() {
$(this).after($dropdown);
$(this).dropdown();
});
});
data1=[
{
"amount": 2808,
"hour": "5",
"outlet": "JAYANAGAR"
},
{
"amount": 37923,
"hour": "6",
"outlet": "JAYANAGAR"
},
{
"amount": 9052,
"hour": "6",
"outlet": "KOLAR"
},
{
"amount": 50527,
"hour": "7",
"outlet": "KOLAR"
},
{
"amount": 74615,
"hour": "7",
"outlet": "JAYANAGAR"
},
{
"amount": 5426,
"hour": "7",
"outlet": "MALLESHWARAM"
},
{
"amount": 63324,
"hour": "8",
"outlet": "KOLAR"
},
{
"amount": 117544,
"hour": "8",
"outlet": "JAYANAGAR"
},
{
"amount": 13468,
"hour": "8",
"outlet": "MALLESHWARAM"
},
{
"amount": 30209,
"hour": "9",
"outlet": "MALLESHWARAM"
},
{
"amount": 52757,
"hour": "9",
"outlet": "KOLAR"
},
{
"amount": 117462,
"hour": "9",
"outlet": "JAYANAGAR"
},
{
"amount": 24549,
"hour": "10",
"outlet": "KOLAR"
},
{
"amount": 116078,
"hour": "10",
"outlet": "JAYANAGAR"
},
{
"amount": 25947,
"hour": "10",
"outlet": "MALLESHWARAM"
},
{
"amount": 114416,
"hour": "11",
"outlet": "JAYANAGAR"
},
{
"amount": 31145,
"hour": "11",
"outlet": "MALLESHWARAM"
},
{
"amount": 12485,
"hour": "11",
"outlet": "KOLAR"
},
{
"amount": 137941,
"hour": "12",
"outlet": "JAYANAGAR"
},
{
"amount": 10133,
"hour": "12",
"outlet": "KOLAR"
},
{
"amount": 18576,
"hour": "12",
"outlet": "MALLESHWARAM"
},
{
"amount": 38092,
"hour": "13",
"outlet": "KOLAR"
},
{
"amount": 50742,
"hour": "13",
"outlet": "MALLESHWARAM"
},
{
"amount": 229840,
"hour": "13",
"outlet": "JAYANAGAR"
},
{
"amount": 56461,
"hour": "14",
"outlet": "MALLESHWARAM"
},
{
"amount": 248120,
"hour": "14",
"outlet": "JAYANAGAR"
},
{
"amount": 53381,
"hour": "14",
"outlet": "KOLAR"
},
{
"amount": 176758,
"hour": "15",
"outlet": "JAYANAGAR"
},
{
"amount": 24684,
"hour": "15",
"outlet": "KOLAR"
},
{
"amount": 45027,
"hour": "15",
"outlet": "MALLESHWARAM"
},
{
"amount": 24637,
"hour": "16",
"outlet": "KOLAR"
},
{
"amount": 141824,
"hour": "16",
"outlet": "JAYANAGAR"
},
{
"amount": 27328,
"hour": "16",
"outlet": "MALLESHWARAM"
},
{
"amount": 48356,
"hour": "17",
"outlet": "MALLESHWARAM"
},
{
"amount": 27359,
"hour": "17",
"outlet": "KOLAR"
},
{
"amount": 153281,
"hour": "17",
"outlet": "JAYANAGAR"
},
{
"amount": 24531,
"hour": "18",
"outlet": "KOLAR"
},
{
"amount": 161967,
"hour": "18",
"outlet": "JAYANAGAR"
},
{
"amount": 51463,
"hour": "18",
"outlet": "MALLESHWARAM"
},
{
"amount": 19577,
"hour": "19",
"outlet": "KOLAR"
},
{
"amount": 41405,
"hour": "19",
"outlet": "MALLESHWARAM"
},
{
"amount": 187858,
"hour": "19",
"outlet": "JAYANAGAR"
},
{
"amount": 34996,
"hour": "20",
"outlet": "MALLESHWARAM"
},
{
"amount": 21356,
"hour": "20",
"outlet": "KOLAR"
},
{
"amount": 177706,
"hour": "20",
"outlet": "JAYANAGAR"
},
{
"amount": 11272,
"hour": "21",
"outlet": "MALLESHWARAM"
},
{
"amount": 16796,
"hour": "21",
"outlet": "KOLAR"
},
{
"amount": 128191,
"hour": "21",
"outlet": "JAYANAGAR"
},
{
"amount": 14767,
"hour": "22",
"outlet": "JAYANAGAR"
},
{
"amount": 4424,
"hour": "22",
"outlet": "KOLAR"
}
]
data= [
{
"amount": 291589,
"billdate": "2018-08-01",
"outlet": "JAYANAGAR"
},
{
"amount": 58337,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM"
},
{
"amount": 65970,
"billdate": "2018-08-01",
"outlet": "KOLAR"
},
{
"amount": 296125,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR"
},
{
"amount": 56545,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM"
},
{
"amount": 72213,
"billdate": "2018-08-02",
"outlet": "KOLAR"
},
{
"amount": 346605,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR"
},
{
"amount": 62459,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM"
},
{
"amount": 65248,
"billdate": "2018-08-03",
"outlet": "KOLAR"
},
{
"amount": 518212,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR"
},
{
"amount": 104801,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM"
},
{
"amount": 138151,
"billdate": "2018-08-04",
"outlet": "KOLAR"
},
{
"amount": 628358,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR"
},
{
"amount": 115223,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM"
},
{
"amount": 134107,
"billdate": "2018-08-05",
"outlet": "KOLAR"
},
{
"amount": 177866,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR"
},
{
"amount": 66095,
"billdate": "2018-08-06",
"outlet": "KOLAR"
},
{
"amount": 284069,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR"
},
{
"amount": 58789,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM"
},
{
"amount": 67886,
"billdate": "2018-08-07",
"outlet": "KOLAR"
},
{
"amount": 313128,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR"
},
{
"amount": 59939,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM"
},
{
"amount": 68558,
"billdate": "2018-08-08",
"outlet": "KOLAR"
}
]
let formatData = function (data) {
let billdates = [];
let outlets = [];
data.forEach(element => {
if (billdates.indexOf(element.billdate) == -1) {
billdates.push(element.billdate);
}
if (outlets.indexOf(element.outlet) == -1) {
outlets.push(element.outlet);
}
});
return {
data: data,
billdates: billdates,
outlets: outlets,
};
};
let renderTable = function (data) {
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("tbl");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "Bill___Date";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let outletWiseTotal = {};
th = document.createElement("th");
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
data.forEach(el => {
if (el.outlet == element) {
outletWiseTotal[element] += parseInt(el.amount);
}
});
grandTotal += outletWiseTotal[element];
});
thead.appendChild(headerRow);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = outletWiseTotal[element];
th.classList.add("text-right"); //ol totals
headerRow.appendChild(th);
});
th = document.createElement("th");
th.innerHTML = grandTotal;
th.classList.add("text-right");
headerRow.insertBefore(th , headerRow.children[1] );
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element => {
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
outlets.forEach(outlet => {
let el = 0;
data.forEach(d => {
if (d.billdate == element && d.outlet == outlet) {
total += parseInt(d.amount);
el = d.amount;
}
});
td = document.createElement("td");
a = document.createElement("a");
// th.innerHTML = "Action drop"; // removed
td.classList.add("text-right");
td.classList.add("dropdown");
a.classList.add("btn-default");
a.classList.add("actionButton");
// added
a.setAttribute("data-toggle", "dropdown");
a.innerHTML = el;
td.appendChild(a); // added
row.appendChild(td);
});
/*console.log("row is : " , row.children )*/
td = document.createElement("td");
td.innerHTML = total;
td.classList.add("text-right"); //column total
// row.appendChild(td);
row.insertBefore(td , row.children[1] );
tbody.appendChild(row);
});
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
let formatedData = formatData(data);
renderTable(formatedData);.actionButton {
padding-right: 15px;
position: relative;
}
.dropdown::after {
position: absolute;
content: '';
right: 5px;
top: 15px;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-top: 5px solid #000;
}<script
type="text/javascript"
src="http://code.jquery.com/jquery-2.0.2.js"
></script>
<link
rel="stylesheet"
type="text/css"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
/>
<script
type="text/javascript"
src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"
></script>
<link
rel="stylesheet"
type="text/css"
href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"
/>
<div id="tbl"></div>
<ul id="contextMenu" class="dropdown-menu" role="menu">
<li><a href="#" class="link1">go to next</a></li>
<li><a href="#" class="Link2">next</a></li>
</ul>最新问题
- 查询将查找与 user2 发布相同标记集的用户
- 如何将 Telegram 聊天机器人与 React 网站聊天小部件连接？
- 在 Firebase 实时回收器视图中仅过滤和加载非重复名称
- ggplot 切断州边界线
- TryTake 正在窃取最近在另一个线程上添加的元素
- numpy.random.randn 每次都会生成相同的值
- 在 Windows 上使用 GSL（编译、链接等）。分步指南
- 查询规划器未使用时间戳上的部分索引，尽管 WHERE 子句中的周期匹配
- 启动动画服务活动
- 如何找到pip使用的CA包？
- 有什么方法可以让R中散点图中的绘图点更加透明吗？
- 正则表达式匹配由空格分隔的特定单词
- AsyncAPI 中的关联 ID 是什么？
- weka 中的值数量错误
- 合并具有相同列名的数据框
- kubernetes 使用索引设置 env 变量值
- 在 Groovy 控制台中注册和使用 JDBC 驱动程序
- 出现错误无法构建kafka消费者
- 更改 numpy 中矩阵对角线的值
- 使用 CV2 读取 4 通道图像进行语义分割
© www.soinside.com 2019 - 2024. All rights reserved.