HTML表格中的隐藏行导致问题

【问题标题】：Hidden rows in HTML table causing problemHTML表格中的隐藏行导致问题
【发布时间】：2019-04-15 16:47:09
【问题描述】：

我有一个带有 JSON 数据的 HTML 表格，我用 JavaScript 创建了这个表格

我在做什么：-

  • 我有一个表，它的列是 col-span 所需要的
  • 所以每个标题下都有四列
  • 我的表格上方有一个过滤器，以便用户可以选择他们想要查看的列
  • 为此，我有一个带有下拉菜单的输入字段，其中包含用户可以相应过滤的所有列名
  • 数据过滤正确

我面临的问题是：-

  • 我正在使用下面的代码来隐藏或显示列

    $("#save").on("click", function() {
  // Get the selected classes
  var classes = $("#To")
    .val()
    .replace(/\s+/g, "")
    .split(","); // Hide cells
  $(".table thead tr:not(:first) th:not(:first-child)").hide();
  $(".table tbody tr td:not(:first-child)").hide(); // Adjust thead first row colspans
  $(".table thead tr:first th:not(:first)").attr("colspan", classes.length); // For each classes selected
  for (i = 0; i < classes.length; i++) {
    //force 3 first letters to lowercase
    var classToShow =
      classes[i].substr(0, 3).toLowerCase() + classes[i].substr(3); // For each element having the class
    $("." + classToShow).each(function() {
      var index = $(this).index(); // Show selected cells in the thead
      $(".table thead tr:not(:first)").each(function() {
        $(this)
          .find("th")
          .eq(index)
          .show();
      }); // Show selected cells in the tbody
      $(".table tbody tr").each(function() {
        $(this)
          .find("td")
          .eq(index)
          .show();
      });
    });
  }
});

  • 通过上面的代码，我根据用户选择隐藏和显示列

  • 我正在使用table2export 将表格导出到excel
  • 但问题是当用户选择任何下拉菜单然后过滤表，然后单击导出完整表的导出时
  • 我隐藏了这些列，但它们仍在导出

我的完整代码

var data = [{
    "billdate": "2018-09-01",
    "outlet": "JAYANAGAR",
    "gross": 451458,
    "discount": 513,
    "GST": 25357,
    "amount": 476426
  },
  {
    "billdate": "2018-09-01",
    "outlet": "MALLESHWARAM",
    "gross": 87190,
    "discount": 0,
    "GST": 4930,
    "amount": 92141
  },
  {
    "billdate": "2018-09-01",
    "outlet": "KOLAR",
    "gross": 109308,
    "discount": 0,
    "GST": 5966,
    "amount": 115313
  },
  {
    "billdate": "2018-09-02",
    "outlet": "JAYANAGAR",
    "gross": 483194,
    "discount": 471,
    "GST": 28319,
    "amount": 511153
  },
  {
    "billdate": "2018-09-02",
    "outlet": "MALLESHWARAM",
    "gross": 109483,
    "discount": 0,
    "GST": 6198,
    "amount": 115704
  },
  {
    "billdate": "2018-09-02",
    "outlet": "KOLAR",
    "gross": 79305,
    "discount": 0,
    "GST": 4254,
    "amount": 83597
  },
  {
    "billdate": "2018-09-03",
    "outlet": "JAYANAGAR",
    "gross": 157660,
    "discount": 263,
    "GST": 9944,
    "amount": 167421
  },
  {
    "billdate": "2018-09-03",
    "outlet": "KOLAR",
    "gross": 51059,
    "discount": 0,
    "GST": 2693,
    "amount": 53775
  }
]

$(".checkbox-menu").on("change", "input[type='checkbox']", function() { // this one to select multiple options as check box

  $("#save").show();
  $(this).closest("li").toggleClass("active", this.checked);
  var sList = "";
  $('input[type=checkbox]').each(function() {
    if (this.checked) {
      sList += $(this).val() + ","
    }
  });

  $("#To").val(sList.slice(0, -1));
});

$(document).on('click', '.allow-focus', function(e) {
  e.stopPropagation();
});


$("#save").on("click", function() {

  // Get the selected classes
  var classes = $("#To").val().replace(/\s+/g, "").split(",");

  // Hide cells
  $(".table thead tr:not(:first) th:not(:first-child)").hide();
  $(".table tbody tr td:not(:first-child)").hide();

  // Adjust thead first row colspans
  $(".table thead tr:first th:not(:first)").attr("colspan", classes.length);

  // For each classes selected
  for (i = 0; i < classes.length; i++) {
    //force 3 first letters to lowercase
    var classToShow = classes[i].substr(0, 3).toLowerCase() + classes[i].substr(3);

    // For each element having the class
    $("." + classToShow).each(function() {
      var index = $(this).index();

      // Show selected cells in the thead
      $(".table thead tr:not(:first)").each(function() {
        $(this).find("th").eq(index).show();
      });

      // Show selected cells in the tbody
      $(".table tbody tr").each(function() {
        $(this).find("td").eq(index).show();
      });
    });
  }
});


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++) { //here i am making the header as col-span
    th = document.createElement("th");
    th.innerHTML = "Discount";
    th.classList.add("text-center");
    th.classList.add("discount"); //adding class to column discount
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "GST";
    th.classList.add("text-center");
    th.classList.add("gst"); //adding class to column 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 = "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");
}
let formatedData = formatData(data);
renderTable(formatedData);

$("#export-btn").click(function() {
  $("#dailySales").table2excel({
    filename: "Daily Sales Report.xls"
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<div class="form-group  col-xs-12 col-sm-12 col-md-8 col-lg-8">
  <label for="subCategoryCode">Filter Data :</label>
  <div class="input-group" id="hideFilter">
    <input type="text" class="form-control" aria-label="Text input with dropdown button" name="To" id="To" readonly>
    <div class="input-group-append">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
      <ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1">

        <li><label> <input type="checkbox"
							value="Gross Amount"> Gross Amount
					</label></li>

        <li><label> <input type="checkbox"
							value="Discount"> Discount
					</label></li>

        <li><label> <input type="checkbox"
							value="GST"> GST
					</label></li>
        <li><label> <input type="checkbox"
							value="Net Amount"> Net Amount	
					</label></li>


      </ul>
    </div>
    <button type="button" class="commonButton" id="save" style="display: none;">
						<i class="fa fa-search"></i>&nbsp;Go
					</button>
  </div>

</div>

<div align="left" class="table table-responsive" id="commonDvScroll">
  <table id="dailySales"></table>
</div>

<button id="export-btn" class="btn btn-default commonButton">
						<i class='fas fa-file-export'></i>&nbsp;Export
					</button>

由于我的代码有点长，所以我已经注释了所有行

  • 对于大家来说，我在保存点击后所做的事情很重要，我已经在开始时发布了，不需要检查表格代码
  • 我认为出了问题的是我隐藏并显示了未从表中删除列的列，这就是它导出完整表的原因

如果有任何其他方法或我正在做的事情也可以这样做，请指导我谢谢

【问题讨论】：

    标签： javascript jquery html excel


    【解决方案1】：

    您确实需要在导出之前从表格中删除隐藏的单元格。为此，您需要制作表格的副本。

    这是相关代码

    $("#export-btn").click(function() {
  var copyTable = $("#dailySales").clone(false).attr('id', '_copy_dailySales');
  copyTable.insertAfter($("#dailySales"))
  copyTable.find('td:hidden, th:hidden').remove()

  copyTable.table2excel({
    filename: "Daily Sales Report.xls"
  });
  copyTable.remove()

});


    console.clear()
var data = [{
    "billdate": "2018-09-01",
    "outlet": "JAYANAGAR",
    "gross": 451458,
    "discount": 513,
    "GST": 25357,
    "amount": 476426
  },
  {
    "billdate": "2018-09-01",
    "outlet": "MALLESHWARAM",
    "gross": 87190,
    "discount": 0,
    "GST": 4930,
    "amount": 92141
  },
  {
    "billdate": "2018-09-01",
    "outlet": "KOLAR",
    "gross": 109308,
    "discount": 0,
    "GST": 5966,
    "amount": 115313
  },
  {
    "billdate": "2018-09-02",
    "outlet": "JAYANAGAR",
    "gross": 483194,
    "discount": 471,
    "GST": 28319,
    "amount": 511153
  },
  {
    "billdate": "2018-09-02",
    "outlet": "MALLESHWARAM",
    "gross": 109483,
    "discount": 0,
    "GST": 6198,
    "amount": 115704
  },
  {
    "billdate": "2018-09-02",
    "outlet": "KOLAR",
    "gross": 79305,
    "discount": 0,
    "GST": 4254,
    "amount": 83597
  },
  {
    "billdate": "2018-09-03",
    "outlet": "JAYANAGAR",
    "gross": 157660,
    "discount": 263,
    "GST": 9944,
    "amount": 167421
  },
  {
    "billdate": "2018-09-03",
    "outlet": "KOLAR",
    "gross": 51059,
    "discount": 0,
    "GST": 2693,
    "amount": 53775
  }
]

$(".checkbox-menu").on("change", "input[type='checkbox']", function() { // this one to select multiple options as check box

  $("#save").show();
  $(this).closest("li").toggleClass("active", this.checked);
  var sList = "";
  $('input[type=checkbox]').each(function() {
    if (this.checked) {
      sList += $(this).val() + ","
    }
  });

  $("#To").val(sList.slice(0, -1));
});

$(document).on('click', '.allow-focus', function(e) {
  e.stopPropagation();
});


$("#save").on("click", function() {

  // Get the selected classes
  var classes = $("#To").val().replace(/\s+/g, "").split(",");

  // Hide cells
  $(".table thead tr:not(:first) th:not(:first-child)").hide();
  $(".table tbody tr td:not(:first-child)").hide();

  // Adjust thead first row colspans
  $(".table thead tr:first th:not(:first)").attr("colspan", classes.length);

  // For each classes selected
  for (i = 0; i < classes.length; i++) {
    //force 3 first letters to lowercase
    var classToShow = classes[i].substr(0, 3).toLowerCase() + classes[i].substr(3);

    // For each element having the class
    $("." + classToShow).each(function() {
      var index = $(this).index();

      // Show selected cells in the thead
      $(".table thead tr:not(:first)").each(function() {
        $(this).find("th").eq(index).show();
      });

      // Show selected cells in the tbody
      $(".table tbody tr").each(function() {
        $(this).find("td").eq(index).show();
      });
    });
  }
});


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++) { //here i am making the header as col-span
    th = document.createElement("th");
    th.innerHTML = "Discount";
    th.classList.add("text-center");
    th.classList.add("discount"); //adding class to column discount
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "GST";
    th.classList.add("text-center");
    th.classList.add("gst"); //adding class to column 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 = "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");
}
let formatedData = formatData(data);
renderTable(formatedData);

$("#export-btn").click(function() {
  var copyTable = $("#dailySales").clone(false).attr('id', '_copy_dailySales');
  copyTable.insertAfter($("#dailySales"))
  copyTable.find('td:hidden, th:hidden').remove()
  
  copyTable.table2excel({
    filename: "Daily Sales Report.xls"
  });
  copyTable.remove()

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<div class="form-group  col-xs-12 col-sm-12 col-md-8 col-lg-8">
  <label for="subCategoryCode">Filter Data :</label>
  <div class="input-group" id="hideFilter">
    <input type="text" class="form-control" aria-label="Text input with dropdown button" name="To" id="To" readonly>
    <div class="input-group-append">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
      <ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1">

        <li><label> <input type="checkbox"
							value="Gross Amount"> Gross Amount
					</label></li>

        <li><label> <input type="checkbox"
							value="Discount"> Discount
					</label></li>

        <li><label> <input type="checkbox"
							value="GST"> GST
					</label></li>
        <li><label> <input type="checkbox"
							value="Net Amount"> Net Amount	
					</label></li>


      </ul>
    </div>
    <button type="button" class="commonButton" id="save" style="display: none;">
						<i class="fa fa-search"></i>&nbsp;Go
					</button>
  </div>

</div>

<div align="left" class="table table-responsive" id="commonDvScroll">
  <table id="dailySales"></table>
</div>

<button id="export-btn" class="btn btn-default commonButton">
						<i class='fas fa-file-export'></i>&nbsp;Export
					</button>

    【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-09-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode