javascript - 使用 jquery 在复选框选择上显示/隐藏列

Question

我正在 .NET MVC 项目中处理列过滤器。我的要求是，在下拉控件中，所有表标题列名称都将与复选框绑定(bind)。默认情况下，所有选项都被选中。当我从下拉列表中取消选择它反射(reflect)到表数据的任何选项时，该列将不会显示。

我写了一些代码但无法实现复选框功能。请帮我。如果 jquery 插件可用，那对我也有帮助。

JsFiddle DEMO

代码

$("#myOptions").change(function() {
      selectedVal = $.trim($("#myOptions option:selected").text());
    var i = $("#myTable thead .headercell td:contains(" + selectedVal + ")").index() + 1;
    $('td:nth-child(' + i+ ')').toggle();
    });

Answer 1

我想你想让多选更容易:使用select2:

$("#myOptions").select2({
  tags: true
}).change(function() {
  var test = $("#myOptions").val();
  $("td").show();
  for (var j = 0, len = test.length; j < len; j++) {
    $('td:nth-child(' + test[j] + ')').hide();
  }

});

body{font-family:calibri;}
  table { padding: 0; border-collapse: collapse; }
  table thead td { background-color: #f2f2f2; font-weight:bold;}
  table td { border: 1px solid #d7d7d7; padding: 5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<select id="myOptions" multiple="multiple" style="width:100%">
  <option value="1">Name</option>
  <option value="2">Address</option>
  <option value="3">City</option>
  <option value="4">Country</option>
</select>  
<table id="myTable" cellspacing="0" cellpadding="0">
  <thead>
    <tr class="headercell">
      <td>Name</td>
      <td>Address</td>
      <td>City</td>
      <td>Country</td>
    </tr>
  </thead>
  <tbody>
    <tr class="datacell">
      <td>Anand</td>
      <td>2404/71</td>
      <td>Mohali</td>
      <td>India</td>
    </tr>
    <tr class="datacell">
      <td>Nilesh</td>
      <td>236/10</td>
      <td>Chandigarh</td>
      <td>India</td>
    </tr>
    <tr class="datacell">
      <td>Rahul</td>
      <td>A 71 Radhepuri</td>
      <td>New Delhi</td>
      <td>India</td>
    </tr>
    <tr>
      <td>Pratius</td>
      <td>Trishna Apartment-740</td>
      <td>Hydrabad</td>
      <td>India</td>
    </tr>
  </tbody>
  </table>