Advanced Search for Tables with Javascript
<p>Looking for a way to filter a table using Javascript. The snippet below is capable of doing so, but only for the whole table.</p>

<p>The advanced filter would be able to search for <code>index=1</code> - the way I came up with (but unable to code it) is by binding the headers, e.g. <code>&lt;th&gt;Index&lt;/th&gt;</code> as criteria.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  $("#search").keyup(function () {
    var searchTerm = $("#search").val();
    var listItem = $('.results tbody').children('tr');
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

    $.extend($.expr[':'], {'containsi': function(elem, i, match, array){
          return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) &gt;= 0;
      }
    });
      
    $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e){
      $(this).attr('visible','false');
    });

    $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e){
      $(this).attr('visible','true');
    });

    // Search Count item hits
    var jobCount = $('.results tbody tr[visible="true"]').length;
    $('.counter').text(jobCount + ' item');
    if(jobCount == '0') {$('.no-result').show();}
      else {$('.no-result').hide();}
  });

  // Parameter Passing
  var queryString = new Array();
  $(function() {
    if (queryString.length == 0) {
        if (window.location.search.split('?').length &gt; 1) {
            var params = window.location.search.split('?')[1].split('&amp;');
            for (var i = 0; i &lt; params.length; i++) {
                var key = params[i].split('=')[0];
                var value = decodeURIComponent(params[i].split('=')[1]);
                queryString[key] = value;
            }
        }
    }
    
        
    if (queryString["id"] != null) {
         $('#search').val(queryString["id"])
    }
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.results tr[visible='false'],
.no-result{
  display:none;
}

.results tr[visible='true']{
  display:table-row;
}

.counter{
  padding:8px; 
  color:#ccc;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="form-group pull-right"&gt;
        &lt;input type="text" class="form-control" id="search" placeholder="search"&gt;
      &lt;/div&gt;
      &lt;span class="counter pull-right"&gt;&lt;/span&gt;
&lt;table class="table table-condensed table-hover results"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Index&lt;/th&gt;
            &lt;th&gt;Column1&lt;/th&gt;
            &lt;th&gt;Column2&lt;/th&gt;
            &lt;th&gt;Column3&lt;/th&gt;
          &lt;/tr&gt;
            &lt;tr class="warning no-result"&gt;
              &lt;td colspan="4"&gt;&lt;i class="fa fa-warning"&gt;&lt;/i&gt; No result&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;112&lt;/td&gt;
            &lt;td&gt;Content112&lt;/td&gt;
            &lt;td&gt;Content2&lt;/td&gt;
            &lt;td&gt;Content329&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;123&lt;/td&gt;
            &lt;td&gt;SomeOtherContent112&lt;/td&gt;
            &lt;td&gt;SomeOtherContent123&lt;/td&gt;
            &lt;td&gt;SomeOtherContent3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;329&lt;/td&gt;
            &lt;td&gt;DifferentContent123&lt;/td&gt;
            &lt;td&gt;DifferentContent2&lt;/td&gt;
            &lt;td&gt;DifferentContent329&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;</code></pre>
</div>
</div>
</p>