如何隐藏HTML表格行

Question

I am trying to hide HTML table row using jQuery/JavaScript, My HTML table is rendering with JSON data

I want to hide certain rows when the user selects multiple drop-down and clicks on go

• Inside my table, I have several salesType as Cash , Creditcard , Swiggy , Zomato and more
• My drop-down also contains these values
• what I am trying to do what option user selects, after clicking on go those rows should get populated and others should hide

My code

 $(".checkbox-menu").on("change", "input[type='checkbox']", function() { $(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(); }); var cpy = [{ "Billdate": "2018-08-04", "Outlet": "JAYANAGAR", "Total": 518212, "Cash": 508161, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "10051", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-04", "Outlet": "MALLESHWARAM", "Total": 104801, "Cash": 102675, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "2126", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-04", "Outlet": "KOLAR", "Total": 138151, "Cash": 138151, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "0", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-05", "Outlet": "JAYANAGAR", "Total": 628358, "Cash": 608336, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "20022", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-05", "Outlet": "MALLESHWARAM", "Total": 115113, "Cash": 108903, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "6210", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-05", "Outlet": "KOLAR", "Total": 134107, "Cash": 134107, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "0", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-06", "Outlet": "JAYANAGAR", "Total": 177866, "Cash": 177866, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "0", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-06", "Outlet": "KOLAR", "Total": 66095, "Cash": 66095, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "0", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-07", "Outlet": "JAYANAGAR", "Total": 283124, "Cash": 277098, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "6026", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-07", "Outlet": "MALLESHWARAM", "Total": 58789, "Cash": 58214, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "575", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-07", "Outlet": "KOLAR", "Total": 67886, "Cash": 67886, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "0", "uber Eats": "0", "Zomato": "0" }] function getDataList(jsn) { var Billdate = []; var Outlet = []; var SalesType = []; Billdate = [...new Set(jsn.map(ele => ele.Billdate))]; Outlet = [...new Set(jsn.map(ele => ele.Outlet))]; for (let i in jsn[0]) { if (i !== 'Billdate' && i !== 'Outlet') { SalesType.push(i) } } return { Billdate, Outlet, SalesType } } function structureJSON(obj) { var arr = []; obj.Billdate.forEach((ele1, index1) => { obj.SalesType.forEach((ele, index) => { let row; if (index === 0) { row = { Billdate: ele1, SalesType: ele }; } else { row = { Billdate: "", SalesType: ele }; } obj.Outlet.forEach((ele2, index2) => { var selected = cpy.filter((ele3, index3) => { return ele3.Billdate === ele1 && ele3.Outlet == ele2 }); if (selected.length != 0) row[ele2] = selected[0][ele] else row[ele2] = "0"; }) arr.push(row) }) }) return arr; } var tableValue = structureJSON(getDataList(cpy)) addTable(tableValue) function addTable(tableValue) { var $tbl = $("<table />", { "class": "table table-striped table-bordered table-hover" }), $thd = $("<thead/>"), $tb = $("<tbody/>"), $trh = $("<tr/>", { "class": "text-center" }); $.each(Object.keys(tableValue[0]), function(_, val) { $("<th/>").html(val).appendTo($trh); }); $trh.appendTo($thd); $.each(tableValue, function(_, item) { $tr = $("<tr/>", { "class": "filterData" }); console.log(item.SalesType) // this one is sales type $.each(item, function(key, value) { if (isNaN(value)) { $("<td/>", { "class": "text-left" }).html(value).appendTo($tr); } else { $("<td/>", { "class": "text-right" }).html(value.toLocaleString('en-in')).appendTo($tr); } $tr.appendTo($tb); if (item.Billdate != "") { $tr.css("background-color", "#DFADF4"); } }); }); $tbl.append($thd).append($tb); $("#salesBreakupTable").html($tbl); } 

 <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> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <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="Cash"> Cash </label></li> <li><label> <input type="checkbox" value="Creditcard"> Creditcard </label></li> <li><label> <input type="checkbox" value="Coupon"> Coupon </label></li> <li><label> <input type="checkbox" value="Credit"> Credit </label></li> <li><label> <input type="checkbox" value="Swiggy"> Swiggy </label></li> <li><label> <input type="checkbox" value="uber Eats"> uber Eats </label></li> <li><label> <input type="checkbox" value="Zomato"> Zomato </label></li> </ul> </div> <button type="button" class="commonButton" id="save"> <i class="fa fa-search"></i>&nbsp;Go </button> </div> <div align="Center" class="table table-responsive" id="commonDvScroll"> <table id="salesBreakupTable"></table> </div> 

to export the table into excel I am using this code

$("#export").click(function() {
    var copyTable = $("#salesBreakupTable").clone(false).attr('id', '_copy_dailySales');

    copyTable.insertAfter($("#dailySales"))
    copyTable.find('display:none').remove()

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

});

I am using this plugin for generating the excel from jQuery: <script src="https://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

but its exporting full table with hidden rows.

Answer 1

Try this:

 $(".checkbox-menu").on("change", "input[type='checkbox']", function() { $(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(); }); var cpy = [{ "Billdate": "2018-08-04", "Outlet": "JAYANAGAR", "Total": 518212, "Cash": 508161, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "10051", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-04", "Outlet": "MALLESHWARAM", "Total": 104801, "Cash": 102675, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "2126", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-04", "Outlet": "KOLAR", "Total": 138151, "Cash": 138151, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "0", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-05", "Outlet": "JAYANAGAR", "Total": 628358, "Cash": 608336, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "20022", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-05", "Outlet": "MALLESHWARAM", "Total": 115113, "Cash": 108903, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "6210", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-05", "Outlet": "KOLAR", "Total": 134107, "Cash": 134107, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "0", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-06", "Outlet": "JAYANAGAR", "Total": 177866, "Cash": 177866, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "0", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-06", "Outlet": "KOLAR", "Total": 66095, "Cash": 66095, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "0", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-07", "Outlet": "JAYANAGAR", "Total": 283124, "Cash": 277098, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "6026", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-07", "Outlet": "MALLESHWARAM", "Total": 58789, "Cash": 58214, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "575", "uber Eats": "0", "Zomato": "0" }, { "Billdate": "2018-08-07", "Outlet": "KOLAR", "Total": 67886, "Cash": 67886, "Creditcard": 0, "Coupon": 0, "Paytm": 0, "Credit": 0, "Swiggy": "0", "uber Eats": "0", "Zomato": "0" }] function getDataList(jsn) { var Billdate = []; var Outlet = []; var SalesType = []; Billdate = [...new Set(jsn.map(ele => ele.Billdate))]; Outlet = [...new Set(jsn.map(ele => ele.Outlet))]; for (let i in jsn[0]) { if (i !== 'Billdate' && i !== 'Outlet') { SalesType.push(i) } } return { Billdate, Outlet, SalesType } } function structureJSON(obj) { var arr = []; obj.Billdate.forEach((ele1, index1) => { obj.SalesType.forEach((ele, index) => { let row; if (index === 0) { row = { Billdate: ele1, SalesType: ele }; } else { row = { Billdate: "", SalesType: ele }; } obj.Outlet.forEach((ele2, index2) => { var selected = cpy.filter((ele3, index3) => { return ele3.Billdate === ele1 && ele3.Outlet == ele2 }); if (selected.length != 0) row[ele2] = selected[0][ele] else row[ele2] = "0"; }) arr.push(row) }) }) return arr; } var tableValue = structureJSON(getDataList(cpy)) addTable(tableValue) function addTable(tableValue) { var $tbl = $("<table />", { "class": "table table-striped table-bordered table-hover" }), $thd = $("<thead/>"), $tb = $("<tbody/>"), $trh = $("<tr/>", { "class": "text-center" }); $.each(Object.keys(tableValue[0]), function(_, val) { $("<th/>").html(val).appendTo($trh); }); $trh.appendTo($thd); $.each(tableValue, function(_, item) { $tr = $("<tr/>", { "class": "filterData" }); console.log(item.SalesType) // this one is sales type $.each(item, function(key, value) { if (isNaN(value)) { $("<td/>", { "class": "text-left" }).html(value).appendTo($tr); } else { $("<td/>", { "class": "text-right" }).html(value.toLocaleString('en-in')).appendTo($tr); } $tr.appendTo($tb); if (item.Billdate != "") { $tr.css("background-color", "#DFADF4"); } }); }); $tbl.append($thd).append($tb); $("#salesBreakupTable").html($tbl); } $("#save").on("click", function() { var selectedType = []; $.each($(".dropdown-menu input[type='checkbox']:checked"), function() { selectedType.push($(this).val()); }); $.each($("#salesBreakupTable tr.filterData td:nth-child(2)"), function() { if (jQuery.inArray($(this).text(), selectedType) == -1 && $(this).text() != "Total") { $(this).parent().css("display", "none"); $(this).parent().addClass("hide-data"); } else { $(this).parent().css("display", ""); $(this).parent().removeClass("hide-data"); } }); }); 

 <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> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <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="Cash"> Cash </label></li> <li><label> <input type="checkbox" value="Creditcard"> Creditcard </label></li> <li><label> <input type="checkbox" value="Coupon"> Coupon </label></li> <li><label> <input type="checkbox" value="Credit"> Credit </label></li> <li><label> <input type="checkbox" value="Swiggy"> Swiggy </label></li> <li><label> <input type="checkbox" value="uber Eats"> uber Eats </label></li> <li><label> <input type="checkbox" value="Zomato"> Zomato </label></li> </ul> </div> <button type="button" class="commonButton" id="save"> <i class="fa fa-search"></i>&nbsp;Go </button> </div> <div align="Center" class="table table-responsive" id="commonDvScroll"> <table id="salesBreakupTable"></table> </div> 

I have only added this part in your code:

$("#save").on("click", function() {
    var selectedType = [];
    $.each($(".dropdown-menu input[type='checkbox']:checked"), function() {
        selectedType.push($(this).val());
    });
    $.each($("#salesBreakupTable tr.filterData td:nth-child(2)"), function() {
        if (jQuery.inArray($(this).text(), selectedType) == -1 && $(this).text() != "Total") {
            $(this).parent().css("display", "none");
            $(this).parent().addClass("hide-data");
        } else {
            $(this).parent().css("display", "");
            $(this).parent().removeClass("hide-data");
        }
    });
});

I have updated your excel code as following:

$("#export").click(function() {
    var copyTable = $("#salesBreakupTable").clone(false).attr('id', '_copy_dailySales');

    copyTable.insertAfter($("#dailySales"));
    copyTable.find('.hide-data').remove();

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

display:none can't be found using find() in jQuery instead I have added the class and use that class in find() which do the job.