使正则表达式仅基于单列筛选表

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

但我的用户是与此显然不高兴请求的功能，所以他们希望有一个过滤器来代替。所以我做了一个应该像过滤器一样的下拉菜单。然后我看着我的功能，并在想“我怎么能修改此，使它一般工作一样吗？”，所以我想出了这个：

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

然后，你的JavaScript代码可以改变这样的，所以它可以利用class ES而不是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 S的只有td s与指定的类。

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

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

可以简单地通过这条线所取代：

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

更新：

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