如何以選擇性方式呈現表格中的列

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>