title: Modifying javascript table to search for specific data
body: <p>The search form I'm using is found here: <a href="http://bootsnipp.com/snippets/featured/js-table-filter-simple-insensitive" rel="nofollow">http://bootsnipp.com/snippets/featured/js-table-filter-simple-insensitive</a></p>
  
  <p>I found a nice js search form created by Cyruxx that I am implementing on my site. Is it possible to modify this code to only search specific table headers?</p>
  
  <p>For example I have:</p>
  
  <pre><code>     &lt;table class="table table-list-search"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;id&lt;/th&gt;
                          &lt;th&gt;name&lt;/th&gt;
                          &lt;th&gt;address&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;107&lt;/td&gt;
                          &lt;td&gt;John Doe&lt;/td&gt;
                          &lt;td&gt;1074 example street&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;100&lt;/td&gt;
                          &lt;td&gt;Henry&lt;/td&gt;
                          &lt;td&gt;1111 example ave&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;   
  </code></pre>
  
  <p>How can I modify the code to only search the id column for example. In other words, typing the number '1' would only show table rows with a '1' in the 'id' header. Typing '1074' in my example would return 0 results while typing '1' would show both listings.</p>
  
  <pre><code>$(document).ready(function() {
      var activeSystemClass = $('.list-group-item.active');
  
      //something is entered in search form
      $('#system-search').keyup( function() {
         var that = this;
          // affect all table rows on in systems table
          var tableBody = $('.table-list-search tbody');
          var tableRowsClass = $('.table-list-search tbody tr');
          $('.search-sf').remove();
          tableRowsClass.each( function(i, val) {
  
              //Lower text for case insensitive
              var rowText = $(val).text().toLowerCase();
              var inputText = $(that).val().toLowerCase();
              if(inputText != '')
              {
                  $('.search-query-sf').remove();
                  tableBody.prepend('&lt;tr class="search-query-sf"&gt;&lt;td colspan="6"&gt;&lt;strong&gt;Searching for: "'
                      + $(that).val()
                      + '"&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;');
              }
              else
              {
                  $('.search-query-sf').remove();
              }
  
              if( rowText.indexOf( inputText ) == -1 )
              {
                  //hide rows
                  tableRowsClass.eq(i).hide();
  
              }
              else
              {
                  $('.search-sf').remove();
                  tableRowsClass.eq(i).show();
              }
          });
          //all tr elements are hidden
          if(tableRowsClass.children(':visible').length == 0)
          {
              tableBody.append('&lt;tr class="search-sf"&gt;&lt;td class="text-muted" colspan="6"&gt;No entries found.&lt;/td&gt;&lt;/tr&gt;');
          }
      });
  });
  </code></pre>