使正則表達式僅基於單列篩選表

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是你的小提琴的分叉版本的作品。