使 Regex 仅基于单个列过滤 table

Question

我制作了一个供内部使用的电话簿。所有结果都显示在 table 中。我以前只是把它作为我的功能来过滤 table:

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();
    });
}

但是我的用户显然对这个请求的功能不满意，所以他们想要一个过滤器。所以我做了一个下拉菜单，它应该像一个过滤器。然后我在查看我的函数并在思考"How can I modify this, to make it work generally the same?"，所以我想出了这个：

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();
        }
    });
}

我的想法是 select:

中的每个值

<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>

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

编辑

我的 Table 请求的代码：

<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

请注意，您正在为 table 元素分配重复的 ID（因为我从您的 JavaScript 代码中发现）。 ID 在 HTML 页面中应该是唯一的，这就是您的过滤器无法按预期工作的原因。

您可以尝试分配一个 class 代替（或者推荐 HTML 数据属性）。因此，例如，与 name 相关的 td 将具有 class 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 与指定的 class.

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

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

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

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

更新:

This 是你的 fiddle 的分叉版本。

使 Regex 仅基于单个列过滤 table

Make Regex only filter table based on a single column

javascript

jquery

livesearch