如何为每个表列制作过滤器？

Question

目前我必须过滤表格的所有内容，因为过滤器是针对每一行完成的，我正在寻找的是能够在每一列上输入并在该特定列中进行搜索。我附上了我目前拥有它的代码。我希望你能帮助我。非常感谢

表格

<div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">Quick Search</span>
                </div>
                    <input id="filterContent" class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                </div>
<table class="table table-striped table-bordered table-sm text-center" style="width:100%; margin:auto;">
            <thead class= "text-center table-info">
                <tr>
                    <th>#</th>
                    <th>Customer</th>
                    <th>Phone 1</th>
                    <th>Phone 2</th>
                </tr>
            </thead>
            <tbody class="quickSearch">
            <?php foreach($users as $user):
                $counter++ ?>
                    <tr class="text-center">
                        <td><?= $counter; ?></td>
                        <td><?= $user['CUSTOMER'] ;?></td>
                        <td><?= $user['PHONE_1'] ;?></td>
                        <td><?= $user['PHONE_2'] ;?></td>
                    </tr>
            <?php endforeach; ?>
            </tbody>
        </table>

脚本

<script type="text/javascript">
        $(document).ready(function () {
        (function($) {
            $('#filterContent').keyup(function () {
                    var searchValue = new RegExp($(this).val(), 'i');
                    $('.quickSearch tr').hide();
                    $('.quickSearch tr').filter(function () {
                        return searchValue.test($(this).text());
                    }).show();
                        })
            }(jQuery));
        });
    </script> 

Answer 1

为此，您可以在 foreach 之前添加一个新的表格行，类似这样。

<tbody class="quickSearch">
    <tr>
        <td></td>
        <td><input type="text" name="filter[CUSTOMER]" placeholder="Customer Filter" /></td>
        <td><input type="text" name="filter[PHONE_1]" placeholder="Phone 1 Filter"</td>
        <td><input type="text" name="filter[PHONE_2]" placeholder="Phone 2 Filter"</td>
    </tr>
    <?php foreach($users as $user): $counter++ ?>
    <tr class="text-center">
        <td><?= $counter; ?></td>
        <td><?= $user['CUSTOMER'] ;?></td>
        <td><?= $user['PHONE_1'] ;?></td>
        <td><?= $user['PHONE_2'] ;?></td>
    </tr>
    <?php endforeach; ?>
</tbody>

对于每个输入，您可以通过修改脚本的列来过滤结果。