javascript - HTML 表格样式特定列

标签 javascript html css html-table

我有一个 HTML 表，它是动态的，我正在使用数据表来实现一些好的功能表，在这里我使用数据表来修复我的表的标题和列，并且所有这些工作正常

在我的表中，我有一个名为 Total 的列，我正在更改整行的颜色，但效果不佳

  • 我的表也有 coll-span，所以当我设置 nth-child(3) 样式时，它设置的是第三列的主列样式。

Like this

我是这样做的

#dailySales tr th:nth-child(1), 
#dailySales tr td:nth-child(1) 
{
    font-size:25px;
    color:blue;
}

但这行不通

function format(number, decimals = 2, locale = 'en-in') {
  const fixed = parseInt(number).toFixed(decimals);
  const [int, dec] = fixed.split('.')
  const intFormatted = (+int).toLocaleString(locale)
  return intFormatted + (dec ? '.' + dec : '');
}

var data = [{
  "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": 109029,
  "discount": 0,
  "GST": 6062,
  "amount": 115113
}, {
  "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": 267398,
  "discount": 268,
  "GST": 15898,
  "amount": 283124
}, {
  "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]; //calculating totals for Total column
    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");
    th.classList.add("discount");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "GST";
    th.classList.add("text-center");
    th.classList.add("gst");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "Net_Amount";
    th.classList.add("text-center");
    th.classList.add("netAmount"); //adding class to column Net Amount
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "Gross_Amount";
    th.classList.add("text-center");
    th.classList.add("grossAmount"); //adding class to column Gross Amount
    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 = "Net Total";
  td.classList.add("text-center");
  headerRow.appendChild(td);

  outlets.forEach(element => { // these are the table rows for each column
    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);




    });


    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");
  $(table).DataTable({
    "scrollX": true,
    "scrollY": "100px",

    "paging": false,
    "info": false,
    "ordering": false,
    "searching": false,
    fixedColumns: {
      leftColumns: 5
    }
  });


}
let formatedData = formatData(data);
renderTable(formatedData);
#dailySales tr th:nth-child(2),
#dailySales tr td:nth-child(2),
#dailySales tr th:nth-child(3),
#dailySales tr td:nth-child(3),
#dailySales tr th:nth-child(4),
#dailySales tr td:nth-child(4),
#dailySales tr th:nth-child(5),
#dailySales tr td:nth-child(5) {
  color: blue;
}

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;
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.bootstrap4.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<table id="dailySales" class="table table-responsive"></table>

最佳答案 

function format(number, decimals = 2, locale = 'en-in') {
  const fixed = parseInt(number).toFixed(decimals);
  const [int, dec] = fixed.split('.')
  const intFormatted = (+int).toLocaleString(locale)
  return intFormatted + (dec ? '.' + dec : '');
}

var data = [{
  "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": 109029,
  "discount": 0,
  "GST": 6062,
  "amount": 115113
}, {
  "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": 267398,
  "discount": 268,
  "GST": 15898,
  "amount": 283124
}, {
  "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]; //calculating totals for Total column
    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");
    th.classList.add("discount");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "GST";
    th.classList.add("text-center");
    th.classList.add("gst");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "Net_Amount";
    th.classList.add("text-center");
    th.classList.add("netAmount"); //adding class to column Net Amount
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "Gross_Amount";
    th.classList.add("text-center");
    th.classList.add("grossAmount"); //adding class to column Gross Amount
    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 = "Net Total";
  td.classList.add("text-center");
  headerRow.appendChild(td);

  outlets.forEach(element => { // these are the table rows for each column
    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);




    });


    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");
  $(table).DataTable({
    "scrollX": true,
    "scrollY": "100px",

    "paging": false,
    "info": false,
    "ordering": false,
    "searching": false,
    fixedColumns: {
      leftColumns: 5
    }
  });


}
let formatedData = formatData(data);
renderTable(formatedData);
#dailySales tr th:nth-child(2),
#dailySales tr td:nth-child(2),
#dailySales tr th:nth-child(3).sorting_disabled,
#dailySales tr th:nth-child(3).discount,
#dailySales tr td:nth-child(3),
#dailySales tr th:nth-child(4).sorting_disabled,
#dailySales tr th:nth-child(4).gst,
#dailySales tr td:nth-child(4),
#dailySales tr th:nth-child(5).sorting_disabled,
#dailySales tr th:nth-child(5).netAmount,
#dailySales tr td:nth-child(5) {
  color: blue;
}

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;
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.bootstrap4.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<table id="dailySales" class="table table-responsive"></table>

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;
  color: black;
}

关于javascript - HTML 表格样式特定列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56073630/

上一篇：html - 如何计算我的代码中的盒子大小？

下一篇：css - 仅使用 css 如何选择二级 li

相关文章：

JavaScript - 单击未定义数量的元素以切换多个元素

javascript - 传递多个变量以在 Rails Controller 中呈现 json

javascript - colorbox bind on live with elements' grouping 将不起作用

javascript - 将图像添加到 svg -> tspan 标记时遇到问题

javascript - Web 应用程序从哪里开始？

javascript - 使用 CSS、Javascript 和没有唯一 ID 的 anchor 控制显示/隐藏多个 DIV

html - 即使只是调整大小，也可以在不同视口(viewport)上设置样式元素？

javascript - 跟踪 javascript 运行时错误

javascript - 每次单击 loadmore 按钮时，如何将 getJSON 的结果附加到 div 中？

jquery - 网站不适合 Ipad 和 iPhone

©2024 IT工具网  联系我们