个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个包含 JSON 数据的动态表，我正在使用 JavaScript 填充它
var data = [{
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
},
{
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
},
{
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
},
{
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
},
{
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
},
{
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
},
{
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
},
{
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
},
{
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
},
{
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
},
{
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
},
{
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
},
{
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
},
{
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
},
{
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
},
{
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
},
{
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
},
{
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
},
{
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
},
{
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
},
{
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
},
{
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
},
{
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
},
{
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
},
{
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
},
{
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
},
{
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
},
{
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
},
{
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
},
{
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
},
{
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
},
{
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
},
{
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
},
{
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
},
{
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
},
{
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
},
{
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
},
{
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
},
{
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
},
{
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
},
{
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
},
{
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
},
{
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
},
{
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
},
{
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
},
{
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
},
{
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
},
{
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
},
{
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
},
{
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
},
{
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
},
{
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
},
{
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
},
{
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
},
{
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
},
{
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
},
{
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
},
{
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
},
{
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
},
{
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
},
{
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
},
{
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
},
{
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
},
{
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
},
{
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
},
{
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
},
{
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
},
{
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
},
{
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
}
]
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("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = {};
let outletWiseGross = {};
let outletWiseDiscount = {};
let outletWiseGst = {};
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el => {
if (el.outlet == element) {
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
}
});
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
});
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++) {
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
}
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element => {
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
});
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.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");
billdates.forEach(element => {
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet => {
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d => {
if (d.billdate == element && d.outlet == outlet) {
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
}
});
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
});
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
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);table.table-bordered>thead>tr>th {
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
}
/* background-color: #00998C */
table.table-bordered>tbody>tr>td {
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
}<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">
<div align="center" class="table table-responsive">
<table id="dailySales">
</table>
</div>由于我的表格渲染代码很长，所以没必要去那里。我在我的css中做什么，我已经评论了我在做什么
如你所见，tbody 布局与 thead 不匹配，我不知道哪里出了问题。
我不能在这里使用 flex 吗？如果表格宽度超过屏幕宽度，我该如何使用它？我也想水平滚动，因为我正在使用 class="table table -响应式”。
注意:由于某些原因，我无法使用数据表。
编辑 我用 flex 做了这个，但是布局重叠。
table.table-bordered>thead>tr>th {
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
}
/* background-color: #00998C */
table.table-bordered>tbody>tr>td {
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
}
#dailySales thead, #dailySales tbody {
display: block;
}
#dailySales tbody {
height: 500px;
overflow: auto;
}
#dailySales tr {
position: relative;
width: 100%;
display: flex;
}
#dailySales tr td, #dailySales tr th {
flex: 1;
width: 200px;
flex-shrink: 0;
}
最佳答案
添加这个CSS
table thead {
margin-right:17px;
}
table thead tr {
table-layout: fixed;
width: 100%;
display: table;
}
table tbody tr {
display: table;
width: 100%;
table-layout:fixed
}
.wdmin{
min-width:1366px;
overflow-x:auto;
}
但是当屏幕小于 1900 时，你还需要添加水平滚动以防止值重叠
var data = [{
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
},
{
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
},
{
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
},
{
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
},
{
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
},
{
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
},
{
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
},
{
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
},
{
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
},
{
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
},
{
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
},
{
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
},
{
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
},
{
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
},
{
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
},
{
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
},
{
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
},
{
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
},
{
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
},
{
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
},
{
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
},
{
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
},
{
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
},
{
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
},
{
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
},
{
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
},
{
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
},
{
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
},
{
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
},
{
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
},
{
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
},
{
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
},
{
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
},
{
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
},
{
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
},
{
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
},
{
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
},
{
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
},
{
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
},
{
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
},
{
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
},
{
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
},
{
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
},
{
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
},
{
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
},
{
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
},
{
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
},
{
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
},
{
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
},
{
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
},
{
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
},
{
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
},
{
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
},
{
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
},
{
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
},
{
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
},
{
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
},
{
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
},
{
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
},
{
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
},
{
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
},
{
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
},
{
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
},
{
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
},
{
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
},
{
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
},
{
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
},
{
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
},
{
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
}
]
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("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = {};
let outletWiseGross = {};
let outletWiseDiscount = {};
let outletWiseGst = {};
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el => {
if (el.outlet == element) {
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
}
});
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
});
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++) {
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
}
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element => {
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
});
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.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");
billdates.forEach(element => {
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet => {
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d => {
if (d.billdate == element && d.outlet == outlet) {
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
}
});
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
});
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
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);table#dailySales thead,
table#dailySales tbody {
display: block;
}
table#dailySales tbody {
height: calc(100vh - 110px);
/* Just for the demo */
overflow-y: auto;
/* Trigger vertical scroll */
overflow-x: hidden;
/* Hide the horizontal scroll */
}
table.table-bordered>thead>tr>th {
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
}
/* background-color: #00998C */
table.table-bordered>tbody>tr>td {
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
}
table thead {
margin-right:17px;
}
table thead tr {
table-layout: fixed;
width: 100%;
display: table;
}
table tbody tr {
display: table;
width: 100%;
table-layout:fixed
}
.wdmin{
min-width:1900px;
overflow-x:auto;
}<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">
<div align="center" class="wdmin">
<table id="dailySales">
</table>
</div>关于javascript - 如何使 HTML 表格的 tbody 滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55037215/
25
4
0
如果附加了 'not-scroll' 类，我希望我的 body 不滚动，否则它应该正常工作。 我已经搜索这个问题两天了，但找不到任何适合我的解决方案。 我想要的是向 body 添加一个 class，并
我发现似乎是 iOS Safari 中的错误(我正在 iOS 8 上进行测试)。当绝对定位的 iFrame 漂浮在一段可滚动内容上方时，滚动 iFrame 也会滚动下面的内容。以下 HTML (ava
我有以下代码来显示一系列投资组合图片，这些图片以 SVG 格式存储在滚动 div 中: 在 Safari 中滚动使用两根手指或鼠标滚轮当光标位于 SVG 之一上时不起作用。 该页
我想用 javascript 做的是: 一旦你向下滚动页面，将#sidebar-box-fixed 的位置从 position: relative; 更改为定位:固定；。改回position:rela
我对 Elasticsearch 的滚动功能有点困惑。在 elasticsearch 中，每当用户在结果集上滚动时，是否可以每次调用搜索 API？来自文档 "search_type" => "scan
我试图做到这一点，以便当我向上或向下滚动页面时，它会运行不同的相应功能。我发现了一个类似的问题here但我已经尝试了他们的答案并且没有运气。 注意:此页面没有正常显示的滚动条。没有地方可以滚动。 bo
(C语言，GTK库) 在我的表单上，我有一个 GtkDrawingArea 小部件，我在上面使用 Cairo 绘制 GdkPixbufs(从文件加载)。我想要完成的是能够在窗口大小保持固定的情况下使用
最近我一直在尝试创建一个拉到(刷新，加载更多)swiftUI ScrollView !!，灵感来自 https://cocoapods.org/pods/SwiftPullToRefresh 我正在努
我正在开发一个应用程序，其中有两个带有可放置区域的列表和一个带有可拖动项目的侧面菜单。 当我滚动屏幕时，项目的位置困惑。 我试图在谷歌上寻找一些东西，最后得到了这个问题:jQuery draggabl
我在 UIWebView 中加载了一个 HTML 表单，而我的 UIWebView 恰好从 View 的中间开始并扩展。我必须锁定此 webView 不滚动并将其放在 ScrollView 之上以允许
如何在每个元素而不是整个元素上应用淡入淡出(与其高度相比)？ HTML: CSS: * { padding: 0; margin: 0; box-sizing: border
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。 有什么办法吗？ 我想保留属性 pageSnapping:
我制作这个程序是为了好玩，但我被卡住了，因为程序在屏幕外运行。如何在不完全更改代码的情况下实现滚动条。 public static void main(String args[]) throws IO
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。 有什么办法吗？ 我想保留属性 pageSnapping:
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
使用 jquery 技术从 css-tricks.com 获得滚动/跟随侧边栏，如果您不知道我在说什么，这里是代码: $(function() { var $sidebar = $
我是 jQuery Mobile 新手。我需要向我的应用程序添加 Facebook 滑动面板功能。 我经历了 sliding menu panel ，它工作正常，但我在菜单面板中的内容超出了窗口大小，
有没有办法在 js 或 jQuery 或任何其他工具中检测 ctrl + 滚动。我正在尝试执行一些动态布局代码，我需要检测不同分辨率下的屏幕宽度，我通过使用 setTimeout() 的计时器实现了这
我有一部分html代码:
我想控制 RichTextBox 滚动，但在控件中找不到任何方法来执行此操作。 这样做的原因是我希望当鼠标光标位于 RichTextBox 控件上时鼠标滚轮滚动有效(它没有事件焦点:鼠标滚轮事件由表单
我是一名优秀的程序员,十分优秀！