Как установить один флажок, который показывает 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, получим n-ю позицию каждого <th>.После этого переберите все строки и покажите / спрячьте 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();
                }
            });
        });
    });
});