How to hide column in HTML table

Question

I have an HTML table which i am rendering from JSON data i have three headers row first one is showing total and Outlets which are jayanagar , Malleshwaram and Kolar , second one is showing the Amount Type which are Gross Amount , Discount , GST and Net Amount and third one is showing there respective amount column wise and then the table body which is showing full data

What i am trying to do is:-

• I have an input field with drop-down which as checkbox to select multiple options
• the select box are Amount Type like Gross Amount , Discount , GST and Net Amount and there is one button Go
• So when user clicks on Go after selecting options what i am trying to do is to show only that column what user has selected

My Table code

 $(".checkbox-menu").on("change", "input[type='checkbox']", function() { // this one to select multiple options as check box $(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 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 } ] 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); 

 <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"> <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4"> <label for="subCategoryCode">Filter Data :</label> <div class="input-group"> <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"> <i class="fa fa-search"></i>&nbsp;Go </button> </div> </div> <div align="left" class="table table-responsive" id="commonDvScroll"> <table id="dailySales" class="maxWidthCommonTable"></table> </div> 

As my code is bit long so i have commented the lines where i am doing what in my JavaScript code to make it easier

I want to hide the columns on the basis of user selections Any one out here help me out with some approach

Answer 1

The appropriate way to do this is by adding column data to your table, like so:

<table class="table table-striped table-bordered table-hover">
  <thead></thead>
  <colgroup>
    <col style="background-color:yellow; visibility: collapse;">
    <col id="total" span="4" style="background-color:red">
  </colgroup>
  <tbody>
    <tr>
      <th class="text-center">BillDate</th>
      <th colspan="4" class="text-center">Total</th>
      <th colspan="4" class="text-center">JAYANAGAR</th>
      <th colspan="4" class="text-center">MALLESHWARAM</th>
      <th colspan="4" class="text-center">KOLAR</th>
    </tr>
    ...
  </tbody>
</table>

BUT there's a chrome bug that prevents the visibility attribute from having any effect on cols or colgroups.

I would then avoid using a table, and build the table manually with regular divs, and group columns together.

Answer 2

Please go through these links. As per my view you can avoid the select box (if you are using the select box value just for hide the column). You can use the approach mentioned in below links.

`https://codepen.io/feger/pen/eDybC`

show / hide table columns using jQuery

https://api.jquery.com/hide/#hide-options

You can use .hide() Hide the matched elements.

Answer 3

I see that you use some classes like grossAmount , discount , gst and netAmount in the table header... That's a good thing.

It even would be better if those classes were added to the corresponding cells in each row. You could use those really easilly to show/hide the cells.

I achieved something way more complicated using something like 3 nested loops to show the cells based on the index of the header having a selected class.

I took the selected classes from the #To input, which is a coma separated list of words close to the classes needed to find the column indexes.

Note that it is far from optimal and efficient coding, but it works... And could be instructive to you. ;)

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

 $("#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(); }); }); } }); // ======================= NOTHING CHANGED BELOW $(".checkbox-menu").on("change", "input[type='checkbox']", function() { // this one to select multiple options as check box $(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 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 } ] 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); 

 <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"> <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4"> <label for="subCategoryCode">Filter Data :</label> <div class="input-group"> <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"> <i class="fa fa-search"></i>&nbsp;Go </button> </div> </div> <div align="left" class="table table-responsive" id="commonDvScroll"> <table id="dailySales" class="maxWidthCommonTable"></table> </div> 

---

EDIT

Here's an example on how to use classes to show/hide columns using the cell classes. I've made it on a shortened version of your table...

By the way, it is not a problem if the table is "dynamic" or not here... Since the show/hide action runs when the table is rendered. So all needed element exist and can be targeted on user triggered event.

I used the 4 columns classes you had... And 2 more: selectable to target all cells that potentially can be hidden/shown and colspaned to target the headers which will need a colspan attribute adjustment.

So as you can see below, it is much more efficient since there's only a simple loop to gather the values and corresponding class of each 4 checkboxes. I've placed those classes in a data attribute.

 var selections = $(".checkbox-menu :checkbox"); var filterData = $("#To"); var originalColspan = $(".colspaned").attr("colspan"); selections.on("change",function(){ // Clear the "Filter Data" input filterData.val(""); // Get the selected classe var classes = []; var values = []; selections.each(function(){ if($(this).is(":checked")){ // Get the selected classe classes.push( "." + $(this).data("select") ); // Value in the "filter Data" input values.push( $(this).val() ); } }); // Value in the "filter Data" input... If still useful (!) filterData.val(values.join(",")); // Get how many selected var selectedAmount = classes.length; // If at least one selection if(selectedAmount>0){ // Adjust headers colspan attr $(".colspaned").attr("colspan",selectedAmount); // Hide all cells $(".selectable").hide(); // Show selected $(classes.join(",")).show(); } // If no selection, show all cells else{ $(".selectable").show(); // Adjust headers colspan attr $(".colspaned").attr("colspan",originalColspan); } }); 

 <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"> <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4"> <label for="subCategoryCode">Filter Data :</label> <div class="input-group"> <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" data-select="grossAmount"> Gross Amount </label> </li> <li> <label> <input type="checkbox" value="Discount" data-select="discount"> Discount </label> </li> <li> <label> <input type="checkbox" value="GST" data-select="gst"> GST </label> </li> <li> <label> <input type="checkbox" value="Net Amount" data-select="netAmount"> Net Amount </label> </li> </ul> </div> <button type="button" class="commonButton" id="save"> <i class="fa fa-search"></i>&nbsp;Go </button> </div> </div> <div align="left" class="table table-responsive" id="commonDvScroll"> <table id="dailySales" class="maxWidthCommonTable"> <table id="dailySales" class="maxWidthCommonTable"><table class="table table-striped table-bordered table-hover"> <thead> <tr> <th class="text-center">BillDate</th> <th colspan="4" class="text-center colspaned">Total</th> </tr> <tr> <th> </th> <th class="text-center grossAmount selectable">Gross Amount</th> <th class="text-center discount selectable">Discount</th> <th class="text-center gst selectable">GST</th> <th class="text-center netAmount selectable">Net Amount</th> </tr> <tr> <th class="text-center">Total</th> <th class="text-right grossAmount selectable">21,69,942</th> <th class="text-right discount selectable">1,704</th> <th class="text-right gst selectable">1,23,446</th> <th class="text-right netAmount selectable">22,92,502</th> </tr> </thead> <tbody> <tr> <td>2018-08-04</td> <td class="text-right grossAmount selectable">7,21,026</td> <td class="text-right discount selectable">839</td> <td class="text-right gst selectable">40,708</td> <td class="text-right netAmount selectable">7,61,164</td> </tr> <tr> <td>2018-08-05</td> <td class="text-right grossAmount selectable">8,30,944</td> <td class="text-right discount selectable">591</td> <td class="text-right gst selectable">46,947</td> <td class="text-right netAmount selectable">8,77,578</td> </tr> <tr> <td>2018-08-06</td> <td class="text-right grossAmount selectable">2,30,607</td> <td class="text-right discount selectable">0</td> <td class="text-right gst selectable">13,225</td> <td class="text-right netAmount selectable">2,43,961</td> </tr> <tr> <td>2018-08-07</td> <td class="text-right grossAmount selectable">3,87,365</td> <td class="text-right discount selectable">274</td> <td class="text-right gst selectable">22,566</td> <td class="text-right netAmount selectable">4,09,799</td> </tr> </tbody> </table> </table> </div>