Question

如何以选择的方式呈现表格中的列。我有HTML表格，其中包含默认显示的列（A，B，C，D，E）。

我希望用户根据他的选择对此进行子过滤（例如，仅显示A，D，E）

是否有一个jQuery库可以轻松实现这种自定义？

Answer 1

寻找这样的东西？

＆＃13;

$('.column').on('change', function() {
  var index = $('th').index( $('th').filter('[data-column=' + $(this).data('column') + ']') );
  $('th,td').filter(function() {
    return $(this).index() === index;
  })[ this.checked ? 'show' : 'hide' ]();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>
    <input type="checkbox" class="column" checked data-column="a" name="a"/> A
  </label>
  <label>
    <input type="checkbox" class="column" checked data-column="b" name="b"/> B
  </label>
  <label>
    <input type="checkbox" class="column" checked data-column="c" name="c"/> C
  </label>
  <label>
    <input type="checkbox" class="column" checked data-column="d" name="d"/> D
  </label>
  <label>
    <input type="checkbox" class="column" checked data-column="e" name="e"/> E
  </label>
 </div>
  <table cellspacing="0" cellpadding="5" border="1">
    <tr>
      <th data-column="a">A</th>
      <th data-column="b">B</th>
      <th data-column="c">C</th>
      <th data-column="d">D</th>
      <th data-column="e">E</th>
    </tr>
    <tr>
      <td>some data</td>
      <td>some data</td>
      <td>some data</td>
      <td>some data</td>
      <td>some data</td>
    </tr>
  </table>

＆＃13;

如何以有选择的方式呈现表中的列

1 个答案: