如何使用 JS 搜索表并仅返回匹配的行？答案

【问题标题】：How to search a table using JS and return only the matching row?如何使用 JS 搜索表并仅返回匹配的行？
【发布时间】：2015-01-31 23:18:29
【问题描述】：

我有一个如下所示的 HTML 表格：

实际的表格很长，我希望能够搜索条目，只返回匹配的结果。

我目前正在使用以下代码进行搜索（来自here）：

var $rows = $('#table tr');
$('#search').keyup(function() {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;

    $rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();
});

但是有一个问题。当我搜索Foo Bar 时，我希望它返回：

现在，它返回以下内容：

我该如何解决这个问题？这可以通过调整正则表达式来完成吗？我没有想法。

Live Demo

【问题讨论】：

您希望只搜索Foo Bar，还是搜索所有单元格？
根据您的标记可以正常工作。
@Mooseman：整张桌子。
@Jai：是的，但是有什么办法可以修改它以返回上述结果？
@JosephJohn 完成。请看我的回答。

标签： javascript jquery html search html-table

【解决方案1】：

将您的表格组织成多个tbody 组（是的，it's valid）并在其中进行搜索。

var $rows = $('#table tbody');
$('#search').keyup(function () {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;

    $rows.show().filter(function () {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();
});

body {
    padding: 20px;
}
input {
    margin-bottom: 5px;
    padding: 2px 3px;
    width: 209px;
}
td {
    padding: 4px;
    border: 1px #CCC solid;
    width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="search" placeholder="Type to search">
<table id="table" style="width: 100%" cellpadding="10">
    <tbody>
        <tr>
            <td rowspan="3">Foo Bar</td>
            <td>Roll No:</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>stuff</td>
        </tr>
        <tr>
            <td>something</td>
            <td>stuff</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="3">Baz Bak</td>
            <td>Roll No:</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>stuff</td>
        </tr>
        <tr>
            <td>something</td>
            <td>stuff</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="3">Baz Bar</td>
            <td>Roll No:</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>stuff</td>
        </tr>
        <tr>
            <td>something</td>
            <td>stuff</td>
        </tr>
    </tbody>
</table>

（如果您更喜欢 Fiddle 的更新版本：http://jsfiddle.net/9y89dcsp/1/）

【讨论】：

不错的解决方案伙伴 :)
必须接受非常有效的解决方案:)
你就是男人，穆斯曼！谢谢 - 这正是我所需要的 :)
@JosephJohn 乐于助人！ :)

【解决方案2】：

发生这种情况是因为您实际上有一行包含 Foo Bar。该表看起来很好，因为 rowspan 在 UI 中处理了它。但在 DOM 中，只有一行包含“Foo Bar”。

所以你可以做的就是改变你的搜索算法。您可以为每个 tr 调用一个函数。在那个函数里面，

检查你的字符串
如果它与搜索字符串匹配，则将该行存储在一个虚拟表中
进入下一次迭代
检查<td>s 的数量是否为 2 或更少。如果是，请将其附加到虚拟表中
如果<td>s 的编号为3，则表示您已到达下一个合法行。停止此操作并在 UI 中显示虚拟表

【讨论】：