javascript - 使正则表达式仅基于单列过滤表

Question

我制作了一本供内部使用的电话簿。所有结果均显示在表格中。我曾经只是将此作为我的函数来过滤该表:

function LiveSearch() {
    $('input#srch-field').on('keyup', function () {
        var rex = new RegExp($(this).val(), 'i');
        $('.srch-table tr').hide();
        $('.srch-table tr').filter(function () {
            return rex.test($(this).text());
        }).show();
    });
}

但我的用户显然对这个请求的功能不满意，所以他们想要一个过滤器。所以我做了一个下拉菜单，应该起到过滤器的作用。然后我看着我的函数并思考“我如何修改它，使其工作大致相同？”，所以我想出了这个:

function LiveSearch() {
    $('input#srch-field').on('keyup', function () {
        var rex = new RegExp($(this).val(), 'i');
        var e = document.getElementById("srchFilter");
        var filter = e.options[e.selectedIndex].value;
        if (filter === 'all') {
            $('.srch-table tr').hide();
            $('.srch-table tr').filter(function () {
                return rex.test($(this).text());
            }).show();
        } else {
            $('.srch-table tr[id=' + filter + ']').hide();
            $('.srch-table tr[id=' + filter + ']').filter(function () {
                return rex.test($(this).text());
            }).show();
        }
    });
}

这个想法是我选择的每个值:

<div class="form-group">
    <select id="srchFilter" class="form-control">
        <option value="all" selected="selected">No Filter</option>
        <option value="name">Name</option>
        <option value="title">Title</option>
        <option value="department">Department</option>
        <option value="private-phone">Private Phone</option>
        <option value="work-email">Work Email</option>
        <option value="work-phone-land">Work Phone Landline</option>
        <option value="work-phone-mobile">Work Phone Mobile</option>
    </select>
</div>

对应于我的表中的列 ID。但是，如果我的过滤器不是all，那么它根本不执行任何过滤。我可能只是误解了正则表达式的工作原理。有人能解释一下吗？

编辑

我的表的代码作为请求:

<div class="col-lg-6" id="customtable">
    <table class="table table-striped" id="tablesorter">
        <thead>
            <tr>
                <th class="col-xs-4" id="name">
                    Name<span class="glyphicon glyphicon-filter"></span>
                </th>
                <th class="col-xs-4" id="title">
                    Title<span class="glyphicon glyphicon-filter"></span>
                </th>
                <th class="col-xs-4" id="department">
                    Department<span class="glyphicon glyphicon-filter"></span>
                </th>
                <th style="display: none;" id="private-phone">
                    Private Phone
                </th>
                <th style="display: none;" id="work-email">
                    Work Email
                </th>
                <th style="display: none;" id="work-phone-land">
                    Work Phone Landline
                </th>
                <th style="display: none;" id="work-phone-mobile">
                    Work Phone Mobile
                </th>
            </tr>
        </thead>
        <tbody class="srch-table" id="srch-table">
            <tr>
                <td class="col-xs-12"><b>Please Wait...</b></td>
            </tr>
        </tbody>
    </table>
    <div class="fl-separator"></div>
</div>

Answer 1

请注意，您正在为表元素分配重复的 ID(正如我从您的 JavaScript 代码中嗅到的那样)。 ID 在 HTML 页面中应该是唯一的，这就是您的过滤器无法按预期工作的原因。

您可以尝试分配一个类(或者建议使用 HTML 数据属性)。因此，例如，与 name 相关的 td 将具有类 name 而不是 id name。

然后，您的 JavaScript 代码可以像这样更改，以便它可以利用 classes 而不是 ids:

// ... code truncated for brevity

if (filter === 'all') {
  $('.srch-table tr').hide();
  $('.srch-table tr').filter(function () {
    return rex.test($(this).text());
  }).show();
} else {
  $('.srch-table tr').hide();
  $('.srch-table tr').filter(function () {
    return rex.test($(this).find('td.' + filter).text());
  }).show();
}

// ... code truncated for brevity

请注意点选择器的使用，它与仅具有指定类的 td 的 tr 相匹配。

奖励:由于您使用的是 jQuery，因此这些行:

var e = document.getElementById("srchFilter");
var filter = e.options[e.selectedIndex].value;

可以简单地用这一行替换:

var filter = $("#srchFilter").val();

更新:

This是你的 fiddle 的 fork 版本，可以工作。