title: Make Regex only filter table based on a single column
body: <p>I made a phonebook where I work for internal use. All results are shown in a table. I used to just have this as my function to filter on that table:</p>
  
  <pre><code>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();
      });
  }
  </code></pre>
  
  <p>But my users are apparently unhappy with this requested function, so they want a filter instead. So I have made a dropdown that supposed to act like a filter. I was then looking at my function and was thinking "How can I modify this, to make it work generally the same?", so I came up with this:</p>
  
  <pre><code>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();
          }
      });
  }
  </code></pre>
  
  <p>The idea is that every value in my select:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;select id="srchFilter" class="form-control"&gt;
          &lt;option value="all" selected="selected"&gt;No Filter&lt;/option&gt;
          &lt;option value="name"&gt;Name&lt;/option&gt;
          &lt;option value="title"&gt;Title&lt;/option&gt;
          &lt;option value="department"&gt;Department&lt;/option&gt;
          &lt;option value="private-phone"&gt;Private Phone&lt;/option&gt;
          &lt;option value="work-email"&gt;Work Email&lt;/option&gt;
          &lt;option value="work-phone-land"&gt;Work Phone Landline&lt;/option&gt;
          &lt;option value="work-phone-mobile"&gt;Work Phone Mobile&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Corresponds to a Column ID in my table. But if my filter is anything but <code>all</code> it simply doesn't do any filtering whatsoever. I might just be misunderstanding how the regex works. Could anyone shed some light on it?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The code for my Table as request:</p>
  
  <pre><code>&lt;div class="col-lg-6" id="customtable"&gt;
      &lt;table class="table table-striped" id="tablesorter"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th class="col-xs-4" id="name"&gt;
                      Name&lt;span class="glyphicon glyphicon-filter"&gt;&lt;/span&gt;
                  &lt;/th&gt;
                  &lt;th class="col-xs-4" id="title"&gt;
                      Title&lt;span class="glyphicon glyphicon-filter"&gt;&lt;/span&gt;
                  &lt;/th&gt;
                  &lt;th class="col-xs-4" id="department"&gt;
                      Department&lt;span class="glyphicon glyphicon-filter"&gt;&lt;/span&gt;
                  &lt;/th&gt;
                  &lt;th style="display: none;" id="private-phone"&gt;
                      Private Phone
                  &lt;/th&gt;
                  &lt;th style="display: none;" id="work-email"&gt;
                      Work Email
                  &lt;/th&gt;
                  &lt;th style="display: none;" id="work-phone-land"&gt;
                      Work Phone Landline
                  &lt;/th&gt;
                  &lt;th style="display: none;" id="work-phone-mobile"&gt;
                      Work Phone Mobile
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody class="srch-table" id="srch-table"&gt;
              &lt;tr&gt;
                  &lt;td class="col-xs-12"&gt;&lt;b&gt;Please Wait...&lt;/b&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;div class="fl-separator"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>