gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 22:28:14 25 4
gpt4 key购买 nike

我有一个带有 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>


    因为我的代码有点长所以我评论了所有的行
  • 对你们来说,在保存点击后我在做什么很重要,我已经在开始时发布了
  • 我认为出了什么问题是我隐藏并显示了未从表中删除列的列,这就是它导出完整表的原因

  • 如果有任何其他方法或我正在做的事情也可以通过它来完成,请指导我谢谢

    最佳答案

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

    这是相关代码

    $("#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>

    关于javascript - HTML表格中的隐藏行导致问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55684300/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com