Javascript 如何单击显示表中2个特定列的复选框

我有一个表链接到我的SQL。我想使用复选框，在单击时只显示表中的两个特定列

示例：单击“薪资”复选框时，应显示“薪资”列和“扩展名”列

我只让它在只有一列显示的情况下工作

我尝试了以下方法：

$(function(){
$(':checkbox').on('change', function(){
    $('th, td', 'tr').filter(':nth-child(' + $(this).data('col') + ')').toggle();

    $('td:nth-child(2),th:nth-child(2)').show();
    $('td:nth-child(3),th:nth-child(3)').show();

  });
});

<input type="checkbox" data-col="2"  class="example" checked="false"  />&nbsp;Salary&nbsp;
    <input type="checkbox" data-col="3"  class="example"  checked="false" />&nbsp;Position
    <input type="checkbox" data-col="4"  class="example"  checked="false" />&nbsp;City
    <input type="checkbox" data-col="5"  class="example"  checked="false" />&nbsp;Ext
    <input type="checkbox" data-col="6"  class="example"  checked="false" />&nbsp;Joined Date
     <input type="checkbox" data-col="7" class="example"  checked="false" />&nbsp;Age
         <input id="btnHide" onclick="uncheckAll2()" type="button" value="CEAR ALL"/>

<table id="employee-grid"  class="w3-table-all cellspacing="0" width="100%">
            <thead>
                <tr>
            <th class="employee_name" >Name</th>
            <th class="employee_salary" >Salary</th>
            <th class="employee_position">Position</th>
            <th class="employee_city">City</th>
            <th class="employee_extension">Ext</th>
            <th class="employee_joining_date">Joined</th>
            <th class="employee_age">Age</th>
                </tr>
            </thead>
                        <tbody>
            <?php
            $db = new PDO("mysql:host=localhost;dbname=test","root","");
            $stmt = $db->prepare("select * from employee");
            $stmt->execute();
            while($row = $stmt->fetch()){
            ?>
            <tr>

                <td><?php echo $row['employee_name'] ?> </td>
                <td id="sal"><?php echo $row['employee_salary'] ?> </td>
                <td id="pos"><?php echo $row['employee_position'] ?></td>
                <td id="cit"><?php echo $row['employee_city'] ?></td>
                <td id="exts"><?php echo $row['employee_extension'] ?></td>
                <td id="jdat"><?php echo $row['employee_joining_date'] ?></td>
                <td id="agi"><?php echo $row['employee_age'] ?></td>
            </tr>
            <?php
            }
            ?>
        </tbody>
        </table>

<script>
$(function(){
$(':checkbox').on('change', function(){
    $('th, td', 'tr').filter(':nth-child(' + $(this).data('col') + ')').toggle();

});
});
</script>

$（函数（）{
$（':checkbox'）。在（'change'，function（）上{
$（'th，td'，'tr'）.filter（'：第n个子（'+$（this.data（'col'）+'）））.toggle（）；
$（'td:nth child（2），th:nth child（2）'）.show（）；
$（'td:nth child（3），th:nth child（3）'）.show（）；
});
});
薪水
位置
城市
提取
加入日期
年龄
我的想法是。。。每个复选框都引用了
（要显示/隐藏的列）。我使用带有jquery选择器的
数据目标
作为值

<input type="checkbox" data-target=".employee_salary, .employee_extension" checked /> Salary
<input type="checkbox" data-target=".employee_position" checked /> Position
<input type="checkbox" data-target=".employee_city" checked /> City
<input type="checkbox" data-target=".employee_joining_date" checked /> Joined Date
<input type="checkbox" data-target=".employee_age" checked /> Age

工资
位置
城市
加入日期
年龄

通过使用jQuery，获取每个
的第n个位置。然后，迭代所有行并显示/隐藏第n列

$(function() {
    $(':checkbox').on('change', function() {
        var $checkbox = $(this);
        var state = $checkbox.prop('checked'); // true -> show, false -> hide

        // iterate all <th> referenced by <input data-target="">
        $($checkbox.data('target')).each(function() {
            var index = $(this).index(); // get its n-th position

           // iterate all rows, show/hide the n-th column
            $('table tr').each(function() {
                if (state) {
                    $(this).find('th:eq(' + index + ')').show();
                    $(this).find('td:eq(' + index + ')').show();
                } else {
                    $(this).find('th:eq(' + index + ')').hide();
                    $(this).find('td:eq(' + index + ')').hide();
                }
            });
        });
    });
});

$（函数（）{
$（':checkbox'）。在（'change'，function（）上{
var$checkbox=$（此项）；
var state=$checkbox.prop（'checked'）；//true->show，false->hide
//迭代所有引用的
$（$checkbox.data（'target'））。每个（函数（）{
var index=$（this）.index（）；//获取其第n个位置
//迭代所有行，显示/隐藏第n列
$（'table tr'）。每个（函数（）{
如果（州）{
$（this.find（'th:eq（'+index+'））.show（）；
$（this.find（'td:eq（'+index+'））.show（）；
}否则{
$（this.find（'th:eq（'+index+'））.hide（）；
$（this.find（'td:eq（'+index+'））.hide（）；
}
});
});
});
});
谢谢您，先生。工作起来很有魅力。给宝宝一个大大的拥抱[照片]