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

Question

我有一个如下所示的 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

Answer 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/ )