堆栈内存溢出
  繁体   English   中英

如何使HTML表格的正文滚动？

[英]How to make tbody scroll of HTML table?

 原文  2019-03-07 06:17:34  5   1    javascript/ html/ css3/ flexbox/ bootstrap-table

问题描述

我有一个包含JSON数据的动态表，该表在JavaScript的帮助下进行填充

  • 我想要实现的是使肢体滚动
  • 我目前正在做并且也正在工作，但是问题是tbody和thead布局出现tbody的不匹配网格与thead不匹配 

 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中所做的事情，我已经在评论我所做的事情

如您所见，body布局与thead不匹配，我不知道这是怎么回事。

我不能在这里使用flex吗，如果表格宽度超出了屏幕宽度，该如何使用水平class="table table-responsive" sensitive”的水平宽度呢？

注意 ：由于某些原因，我无法使用数据表。

编辑我已经用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;
    }

1 个解决方案

解决方案1
 0  2019-03-07 06:55:23

添加这个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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使html表的tbody垂直滚动 在 React 中，如何使 html 表格的 tbody 可滚动？ 如何独立于“thead”滚动表格的“tbody”？ 滚动表格以将其应用于 tbody 没有td内容的html表tbody滚动分为多行 在 html 表的 tbody 中设置滚动时出现问题 - 对齐被破坏 如何垂直调整HTML表格的正文大小 为表“ tbody”生成水平滚动 如何转换/转换HTML表格tbody（使用rowspans）TO json？ 如何使用javascript打印表格html的唯一tbody
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM