javascript - 选中复选框时如何显示/隐藏列

Question

我有一个显示数据的表格(品牌名称、位置表格、值(value)等)。我被指示创建由复选框组成的过滤器。

当用户选中一个复选框时，仅显示与这些复选框相关的列。如果用户选中多个复选框，则仅显示与这些复选框相关的列。

我遇到的问题是，如果选择多个复选框，则显示多列。我怎样才能实现这个目标？

下表为:

<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 属性。 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>