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

How to render columns in a table in a selective fashion

本文关键字：方式呈 选择性      更新时间：2023-09-26

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

我希望用户根据自己的选择对其进行子过滤（例如，仅显示A、D、e）

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

想要这样的东西吗？

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

相关文章：