How to display/hide columns when checkboxes are checked

Question

I have a table that displays data (Brand Name, Location Form, Value, etc..). I was instructed to create filter which consists of check-boxes.

When a user checks one checkbox, show only that columns pertaining to those checkboxes. If a user checks multiple checkboxes, only show those columns pertaining to those checkboxes.

The issue I am encountering is showing multiple columns if multiple checkboxes are selected. How can I achieve this?

The following is the table:

<table class="equipTable" id="myTable">
    <thead>
        <tr>
            <th class="brandName">Brand Name</th>               
            <th class="makeModelNo">Make/Model No</th>
            <th class="serialNumber">Serial Number</th>
            <th class="assetTag">Asset Tag</th>
            <th class="locationFrom">Location From</th>
            <th class="company">Company</th>
            <th class="value">Value</th>
            <th class="lastModified">Last Modified</th>
        </tr>
    </thead>

    <cfoutput query="EquipD">

    <tbody>
        <tr>
            <td class="brandName">
                <div style="float: left">
                    <a href="javascript:poptasticcnotes('IT_Decomm_Print.cfm?EquipID=#EquipID#');" title="Test Print">
                        <img src="images/printers-and-faxes-icon_sm.png" alt="Print this record" class="no-border" />
                    </a>
                </div>                  
                <div style="margin-left: 5px; margin-top: 10px; float: left">#BName#</div>
            </td>
            <td class="makeModelNo">#Model#</td>
            <td class="serialNumber"><a href="mtn_EquipD.cfm?a=s&id=#EquipID#">#SNo#</a></td>
            <td class="assetTag">#ATag#</td>
            <td class="locationFrom">#LFrom#</td>
            <td class="company">#Company#</td>
            <td class="value">#CValue#</td>
            <td class="lastModified">#EquipD.SubmitBy# <br>#DateFormat("#EquipD.ESubmitDt#", "mm/dd/yyyy")#</em></td>
        </tr>

         <tr>
            <td colspan="8" id="resForSub"><strong><u>REASON</u>:&nbsp;&nbsp;&nbsp;&nbsp;</strong>#ReasonD#</td>

        </tr>
    </tbody>

    </cfoutput>

The jquery code below:

$(document).ready(function() {
    $('input[type="checkbox"]').click(function(){
        var checkBoxes = "", chkBoxesSelected = new Array();
        var idsChecked = {BrandName: 'brandName', makeModelNo: 'makeModelNo', SerialNumber: 'serialNumber', AssetTag: 'assetTag', LocationForm: 'locationFrom', Company: 'company', Value: 'value', LastModified: 'lastModified'};

        //console.log(x);

        $('input[type=checkbox]').each(function () {
            checkBoxes += $(this).attr('id') + "-" + (this.checked ? "checked" : "not checked") + "/";
        });

        chkBoxesSelected = checkBoxes.split("/");

        for(var x = 0; x < chkBoxesSelected.length; x++){
            var temp = chkBoxesSelected[x];

            for(var c = 0; c < idsChecked.length; c++){
                var temp2 = idsChecked[c];

                if(temp == temp2){
                    //show the columns that are have checkbox checked
                }else{
                    //don't show the columns that do not have checkbox checked
                }

            }
        }

        //console.log(chkBoxesSelected);
    });
});

Answer 1

You don't have to keep track of which columns are shown or which are not. Use the change event on the checkboxes. Give the checkboxes a value attribute. The value of the value attribute should be class selector of the column that you want the show or hide. Then based on if the checkbox is selected, show or hide the column that the checkbox is connected to.

By default you can hide the columns and add a class to them when you want to present them. Check out the example below to see how this works.

$(document).ready(function() {

  let $form = $('.toggles');
  
  function toggleColumn(event) {
    let $checkbox = $(event.target);
    let value = $checkbox.val();
    let $target = $(`.${value}`);
    if ($checkbox.is(':checked')) {
      $target.addClass('show');
    } else {
      $target.removeClass('show');
    }
  }
  
  $form.on('change', toggleColumn);

});

table {
  border-collapse: collapse;
  margin-bottom: 50px;
}

table, th, td {
  border: 1px solid black;
}

th, td {
  display: none;
  padding: 5px;
}

th.show, td.show {
  display: table-cell;
}

.toggles {
  display: flex;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th class="brandName">Brand Name</th>
      <th class="makeModelNo">Make/Model No</th>
      <th class="serialNumber">Serial Number</th>
      <th class="assetTag">Asset Tag</th>
      <th class="locationFrom">Location From</th>
      <th class="company">Company</th>
      <th class="value">Value</th>
      <th class="lastModified">Last Modified</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td class="brandName">#Brandname#</td>
      <td class="makeModelNo">#Model#</td>
      <td class="serialNumber">#SNo#</td>
      <td class="assetTag">#ATag#</td>
      <td class="locationFrom">#LFrom#</td>
      <td class="company">#Company#</td>
      <td class="value">#CValue#</td>
      <td class="lastModified">#EquipD.SubmitBy</td>
    </tr>
  </tbody>
 </table>
 
 <form class="toggles">
  <label>
    <span>Brandname</span>
    <input type="checkbox" name="toggle[]" value="brandName">
  </label>
  <label>
    <span>makeModelNo</span>
    <input type="checkbox" name="toggle[]" value="makeModelNo">
  </label>
  <label>
    <span>serialNumber</span>
    <input type="checkbox" name="toggle[]" value="serialNumber">
  </label>
  <label>
    <span>assetTag</span>
    <input type="checkbox" name="toggle[]" value="assetTag">
  </label>
  <label>
    <span>locationFrom</span>
    <input type="checkbox" name="toggle[]" value="locationFrom">
  </label>
  <label>
    <span>company</span>
    <input type="checkbox" name="toggle[]" value="company">
  </label>
  <label>
    <span>value</span>
    <input type="checkbox" name="toggle[]" value="value">
  </label>
  <label>
    <span>lastModified</span>
    <input type="checkbox" name="toggle[]" value="lastModified">
  </label>
 </form>