javascript - 如何以选择性方式呈现表中的列

Question

如何以选择性方式呈现表格中的列。我有包含默认显示的列(A、B、C、D、E)的 HTML 表格。

我希望用户根据他的选择对其进行子过滤(例如只显示 A、D、E)

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

Answer 1

正在寻找这样的东西吗？

$('.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' ]();
});

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