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

但是我的用户显然对这个请求的功能不满意，所以他们想要一个过滤器。所以我做了一个应该像过滤器一样的下拉列表。然后我正在考虑我的功能并且正在思考＆＃34;我如何修改它，使其工作方式基本相同？＆＃34;，所以我提出了这个：

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数据属性）。因此，例如，与td相关的name将有一个类name而不是ID name。

然后，您的JavaScript代码可以像这样更改，以便它可以利用class而不是id s：

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

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

奖金：由于您正在使用jQuery，这些行：

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

可以简单地替换为这一行：

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

<强>更新：

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

根据单个列

1 个答案: