如何使用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>

（如果你喜欢你的小提琴的更新版本：http://jsfiddle.net/9y89dcsp/1/）