如何使html表的tbody垂直滚动

问题描述 投票：9回答：6

我有一个带有JSON数据的HTML表格，其中我正在尝试使用修复标题使tbody垂直滚动

我试图让tbody垂直滚动，以便用户只能在单页中查看数据。

我做了什么

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">
<h1>Testing</h1>
<div align="center" class="table table-responsive">
  <table id="dailySales">
  </table>
</div>

因为我已经编辑了代码以明确我想要实现的目标，所以我试图让我的tbody滚动。

我愿意使用任何可以修复标头的jQuery或JavaScript资源。

javascript jquery html css3 html-table
6个回答
8
投票

使用vh单位设置表格高度，这将解决不同的屏幕尺寸问题。您还可以使用JavaScript更准确地设置响应屏幕的表格高度。

没有DataTables的固定标头表：

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);
  document.body.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
  wrapTable($(table));
}
let formatedData = formatData(data);
renderTable(formatedData);

function wrapTable($table) {
  let $tableWrapper = $('<div>').addClass('table-wrapper').insertAfter($table);
  let $tableBodyWrapper = $('<div>').addClass('table-body-wrapper').appendTo($tableWrapper);
  let $tableWidthTracker = $('<div>').css('width', '100%').appendTo($tableBodyWrapper);
  $table.appendTo($tableBodyWrapper);
  let $tableHeadWrapper = $('<div>').addClass('table-head-wrapper').width($tableWidthTracker.width()).appendTo($tableWrapper);
  let $tableDuplicateHead = $table.clone().find("tbody").remove().end().appendTo($tableHeadWrapper);
  let $dupCols = $tableDuplicateHead.find('thead tr:last').children();
  $table.find('thead tr:last').children().each(function(i) {
    $dupCols.eq(i).css('minWidth', $(this).outerWidth());
  });
  $tableBodyWrapper.on('scroll', function() {
    $tableHeadWrapper.scrollLeft($tableBodyWrapper.scrollLeft());
  });
  $(window).on('resize', function() {
    $tableHeadWrapper.width($tableWidthTracker.width());
  });
}
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;
}

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-wrapper {
  position: relative;
  margin: 10px;
}

.table-head-wrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.table-body-wrapper {
  height: 70vh;
  overflow: auto;
}

.table-body-wrapper>.table {
  margin: 0;
}
<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">
<h1>Fixed Header</h1>
2
投票

var tableValue = [{
    "billdate": "2018-08-04",
    "SalesType": "Total",
    "JAYANAGAR": 518212,
    "MALLESHWARAM": 104801,
    "KOLAR": 138151
  },
  {
    "billdate": "",
    "SalesType": "cash",
    "JAYANAGAR": 508161,
    "MALLESHWARAM": 102675,
    "KOLAR": 138151
  },
  {
    "billdate": "",
    "SalesType": "creditcard",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "coupon",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "paytm",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "credit",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "swiggy",
    "JAYANAGAR": 10051,
    "MALLESHWARAM": 2126,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "kb",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "bigbasket",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "zomato",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "2018-08-05",
    "SalesType": "Total",
    "JAYANAGAR": 628358,
    "MALLESHWARAM": 115223,
    "KOLAR": 134107
  },
  {
    "billdate": "",
    "SalesType": "cash",
    "JAYANAGAR": 608336,
    "MALLESHWARAM": 109013,
    "KOLAR": 134107
  },
  {
    "billdate": "",
    "SalesType": "creditcard",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "coupon",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "paytm",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "credit",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "swiggy",
    "JAYANAGAR": 20022,
    "MALLESHWARAM": 6210,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "kb",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "bigbasket",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "zomato",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  }

]


function addTable(tableValue) {
  var col = Object.keys(tableValue[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1); // TABLE ROW.
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];  
    tr.appendChild(th);
    tr.classList.add("text-center");

  }
  for (var i = 0; i < tableValue.length; i++) { //table body i.e tbody
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      var tabCell = tr.insertCell(-1);
      var tabledata = tableValue[i][col[j]];
      if (tabledata && !isNaN(tabledata)) {
        tabledata = parseInt(tabledata).toLocaleString('en-in')
      }
if (tableValue[i]['billdate'] != "")
{
 tr.style.backgroundColor = "yellow"; 
}
      if (tableValue[i]['billdate'] === tableValue[i][col[j]]) { 
      

        tabCell.classList.add("headerColor"); 
       

      }

      tabCell.innerHTML = tabledata;

      if (j > 1)

        tabCell.classList.add("text-right");

    }
  }

  // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A
  // CONTAINER.
  var divContainer = document.getElementById("salesBreakupTable");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");

}
addTable(tableValue)
<style>
.headerColor
{
color:red;
}
</style>
<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 class="container">
  <table id="salesBreakupTable">
  </table>
</div>
use just add one condition

if (tableValue[i]['billdate'] != "") { tr.style.backgroundColor = "yellow"; }

2
投票

您可以尝试以下代码，也可以使用DataTable js。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<style>
    .headerColor{
        color:red;
    }

    #salesBreakupTable thead, #salesBreakupTable tbody {
        display: block;
    }

    #salesBreakupTable tbody {
        height: 300px;
        overflow: auto;
    }

    #salesBreakupTable tr {
        position: relative;
        width: 100%;
        display: flex;
    }

    #salesBreakupTable tr td, #salesBreakupTable tr th {
        flex: 1;
        width: 200px;
        flex-shrink: 0;
    }
</style>
</head>
<body>


<div class="container">
    <div class="table-responsive">
      <table id="salesBreakupTable">
      </table>

    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    var tableValue = [{
    "billdate": "2018-08-04",
    "SalesType": "Total",
    "JAYANAGAR": 518212,
    "MALLESHWARAM": 104801,
    "KOLAR": 138151
  },
  {
    "billdate": "",
    "SalesType": "cash",
    "JAYANAGAR": 508161,
    "MALLESHWARAM": 102675,
    "KOLAR": 138151
  },
  {
    "billdate": "",
    "SalesType": "creditcard",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "coupon",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "paytm",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "credit",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "swiggy",
    "JAYANAGAR": 10051,
    "MALLESHWARAM": 2126,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "kb",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "bigbasket",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "zomato",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "2018-08-05",
    "SalesType": "Total",
    "JAYANAGAR": 628358,
    "MALLESHWARAM": 115223,
    "KOLAR": 134107
  },
  {
    "billdate": "",
    "SalesType": "cash",
    "JAYANAGAR": 608336,
    "MALLESHWARAM": 109013,
    "KOLAR": 134107
  },
  {
    "billdate": "",
    "SalesType": "creditcard",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "coupon",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "paytm",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "credit",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "swiggy",
    "JAYANAGAR": 20022,
    "MALLESHWARAM": 6210,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "kb",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "bigbasket",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "zomato",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  }

];


function addTable(data) {
    var tableHeader = "<thead><tr>";
    var tableBody = "<tbody>";
    $.each(data,function(i,v){
        if (v['billdate']) {
            tableBody += "<tr class='headerColor'>";
        }else {
            tableBody += "<tr>";
        }
        $.each(v,function(d,a){
            if (i == 0) {
                tableHeader += "<th>"+d+"</th>";
            }
            tableBody += "<td>"+a+"</td>";
        });
        tableBody += "</tr>";
    });
    tableHeader += "</tr></thead>";
    tableBody += "</tbody>";
    $("#salesBreakupTable").addClass("table table-striped table-bordered table-hover").html(tableHeader+tableBody);
}

addTable(tableValue);
</script>
</body>
</html>
2
投票

想法是将表放在div中，同时设置div上隐藏的溢出和表体的溢出自动。这可以用纯css和html完成。查看this修复。

0
投票

尝试替换这个if块：

  if (tableValue[i]['billdate'] === tableValue[i][col[j]]) {

    tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it

  }

用：

  if ((tableValue[i]['billdate'] === tableValue[i][col[j]]) && (tableValue[i][col[j]]).length != 0 ) { // added empty cell filter so empty cells will not get the headerColor class

    tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it

  }

然后应用这种风格：

  .headerColor,.headerColor ~ td
  {
    background-color:red;
    color: white;
  }
  table#salesBreakupTable thead, table#salesBreakupTable tbody { display: block; }
  table#salesBreakupTable tbody {
    height: 280px; /* Just for the demo */
    overflow-y: auto; /* Trigger vertical scroll */
    overflow-x: hidden; /* Hide the horizontal scroll */
  }
0
投票

使用DataTable js代替这一点，因此DataTable js提供了更多的表功能

这里是DataTable颜色添加示例

$('#example').dataTable( {
    "createdRow": function( row, data, dataIndex){
        if(data[2] ==  `someVal`){
            $(row).addClass('redClass');
        }
    }
});

示例网址：qazxsw poi DataTable参考qazxsw poi

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.