Regexのみの単一の列に基づいてテーブルをフィルタリングする

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以外のものであれば、フィルタリングは全く行われません。私はちょうど正規表現の仕組みを誤解しているかもしれません。誰かがそれに光を当てることができますか？

EDIT

要求としての私の表のコード：

<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

あなたがテーブルの要素（私はあなたのJavaScriptコードから傍受される）に重複したIDを割り当てていることに注意してください。 IDはHTMLページ全体で一意である必要があります。そのため、フィルタが期待通りに機能しません。

代わりにクラスを割り当てることもできます（またはHTMLデータ属性の使用をお勧めします）。たとえば、nameに関連するtdは、nameの代わりにnameというクラスを持ちます。

// ... 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 

注のみtdを持ってtr Sに一致するドットセレクタの使用：それはclass ESの代わりid Sを活用できるように

そしては、JavaScriptコードは、次のように変更することができます指定されたクラスを持つ

ボーナス：あなたはjQueryのを使用しているので、これらの行：

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

は、単にこの行で置き換えることができます。

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

更新：

Thisされます動作するあなたのフィドルのフォークされたバージョン。