HTML动态表未显示下拉按钮
我有一个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 malleshwaram和kolar的下拉列表，仅显示不符合用户要求的链接；我想显示为按钮。我在做正确的事，但不知道我要去哪里错。
2 个答案:
答案 0 :(得分：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>
答案 1 :(得分：0)
添加类 btn ，然后再添加 btn-default
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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？