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

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

注意点选择器的使用与trs 匹配，而tds 仅具有指定类。

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

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

可以简单地用这一行代替：

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

更新：

This 是你的小提琴的一个分叉版本。