javascript - 如何单击一个显示表格中 2 个特定列的复选框

Question

我有一个链接到我的 SQL 的表。我想使用在点击时仅显示表格中 2 个特定列的复选框。

示例:点击薪水复选框时，应该会出现 salary_column 和 extension_column。

我只让它只显示一列

我尝试了以下方法:

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

试着让它变成这样:

https://i.ibb.co/8XTv2gc/Untitled.jpg

Answer 1

我的想法是...每个复选框都引用了 <th> (要显示/隐藏的列)。我用 data-target以 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，获取每个 <th> 的第 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();
                }
            });
        });
    });
});