带列的HTML表过滤器

带列的HTML表过滤器,html,filter,html-table,Html,Filter,Html Table,我已经根据中的一个示例设置了一个基本表,我在其中添加了列标题 有人能建议如何修复表过滤器,使其不隐藏列标题吗?这是我一直在测试的代码 Javascript var $rows = $('#table tr'); $('#search').keyup(function() { var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$', reg = RegExp(val,

我已经根据中的一个示例设置了一个基本表,我在其中添加了列标题

有人能建议如何修复表过滤器,使其不隐藏列标题吗?这是我一直在测试的代码

Javascript

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

搜索示例:如果在搜索中键入apple,则会隐藏标题1和标题2。但是,我更喜欢在输入搜索后保留标题1和标题2

使用
var$rows=$(“#table tbody tr”)

我的建议:在标题中添加一个类,并将其从筛选结果中排除:


标题1
标题2
苹果
绿色
葡萄
绿色
橙色
橙色
var$rows=$('#table tr[class!=“header”]);
$(“#搜索”).keyup(函数(){
var val='^(?=.\\b'+$.trim($(this).val()).split(/\s+/).join('\\b)(?=.\\b')+')).$,
reg=RegExp(val,'i'),
文本;
$rows.show().filter(函数()){
text=$(this.text().replace(/\s+/g');
返回!注册测试(文本);
}).hide();
});

问题在于如何过滤。。您的“标题”行实际上是表中的另一个“标准”行。程序不知道您的标题是什么,这就是为什么存在
标记,告诉程序表格的标题和正文是什么。因此,您应该添加
标记,然后使用jameslafferty指出的jQuery选择器。tbody标记通过DOM的神秘智能(傻笑)自动插入。然而,@Babblo的解释使答案更加清晰。谢谢你的解决方案。这是一个清晰的解释,我已经测试了这个解释。另外,我测试了带标签和不带标签,它们都按预期过滤。因为我还在学习-我已经包含了可读性标签。Howard,虽然您的解决方案将要运行,但没有必要添加自定义类,然后在html中有特定标签(thead、tbody和tfoot)时在选择器中否定它。也感谢您提供的解决方案。我不知道我可以将类添加到标记并选择它们。
<input type="text" id="search" placeholder="Type to search">
<table id="table">
     <tr class="header">
      <th>Title 1</th>
      <th>Title 2</th>
    </tr>    
    <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

    var $rows = $('#table tr[class!="header"]');
    $('#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();
    });