Как отображать / скрывать столбцы, когда установлены флажки

Question

У меня есть таблица, которая отображает данные (название бренда, форма местоположения, стоимость и т. Д. c ..). Мне было поручено создать фильтр, который состоит из флажков.

Когда пользователь устанавливает один флажок, показывать только те столбцы, которые относятся к этим флажкам. Если пользователь устанавливает несколько флажков, показываются только те столбцы, которые относятся к этим флажкам.

Проблема, с которой я сталкиваюсь, заключается в отображении нескольких столбцов, если выбраны несколько флажков. Как мне этого добиться?

Ниже приведена таблица:

<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>

Код jquery ниже:

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

Вам не нужно отслеживать, какие столбцы показаны, а какие нет. Используйте событие change на флажках. Присвойте флажкам атрибут значения. Значением атрибута value должен быть селектор класса столбца, который вы хотите показать или скрыть. Затем в зависимости от того, установлен ли флажок, показать или скрыть столбец, к которому подключен флажок.

По умолчанию вы можете скрыть столбцы и добавить к ним класс, когда хотите их представить. Посмотрите пример ниже, чтобы увидеть, как это работает.

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