Question

我有一个表格，我试图根据是否选中复选框来过滤显示的列。除了没有按预期行事的第一列之外，我的工作主要是工作（即隐藏的更多，而不仅仅是列）。我创建了一个显示此行为的fiddle。如您所见，第二列按预期切换，但第一列也删除了其他我不想发生的元素。我不确定在我脑海中发生了什么，这应该有效。任何人都可以指出我的代码中的错误在哪里，并帮助我解决它？

我目前正在使用它进行过滤（可以在小提琴中看到）：

$('#columnCheckboxes input:checkbox').on('click', function() {
    let colToHide = $('#matrixTable th').filter("." + $(this).attr("name"));
    let index = $(colToHide).index();
    $('#matrixTable').find('tr :nth-child(' + (index + 1) + ')').toggle();
});

更新

这是我正在使用的html：

<div>
    <div class="dropdown mb-2">
        <a class="btn btn-secondary dropdown-toggle" href="#" id="columnFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-th fa-lg"></i>
        </a>
        <div class="dropdown-menu" aria-labelledby="columnFilter" id="columnCheckboxes">
            <a class="dropdown-item" href="#"><input type="checkbox" name="1" checked />&nbsp;Delivery Orders</a>
            <a class="dropdown-item" href="#"><input type="checkbox" name="2" checked />&nbsp;Walk-in Orders</a>
        </div>
    </div>
    <table class="table table-bordered" id="matrixTable">
        <thead>
            <tr>
                <th></th>
                <th colspan="2">Event</th>
            </tr>
            <tr>
                <th>Activity</th>
                <th class="1">Delivery Orders</th>
                <th class="2">Walk-in Orders</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    Till Activity
                </th>
                <td>
                    <input type="checkbox" checked />
                </td>
                <td>
                    <input type="checkbox" checked />
                </td>
            </tr>
            <tr>
                <th scope="row">
                    Delivery Activity
                </th>
                <td>
                    <input type="checkbox" checked />
                </td>
                <td>
                    <input type="checkbox" checked />
                </td>
            </tr>
            <tr>
                <th scope="row">
                    Pick Activity
                </th>
                <td>
                    <input type="checkbox" checked />
                </td>
                <td>
                    <input type="checkbox" checked />
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

“事件”单元属于第二列，即“交货单”列。这就是为什么当您点击隐藏“交货订单”列时它隐藏的原因。您可以添加HTML类来帮助jQuery识别它需要隐藏或显示的内容。

使用复选框过滤表格列

1 个答案: