title: jQuery: filtering a table by text or HTML5 data-attribute
body: <p>I've got a table with a several columns and rows with an HTML5 <code>data-attribute</code>. After reading through quite a few SO questions and answers, I've tried to develop code that will allow live search of a table by text or <code>data-attribute</code>, but I'm stuck. <strong>I have gotten the same code to work on <code>&lt;li&gt;</code> elements (see that jsFiddle <a href="http://jsfiddle.net/stBzc/5/" rel="nofollow">here</a>),</strong> so I think my problem is with my jQuery selectors. Does anyone have suggestions on what I'm doing wrong?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input id="search" placeholder="search" /&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;th colspan="4"&gt;
              California
          &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Name&lt;/td&gt;
          &lt;td&gt;Company&lt;/td&gt;
          &lt;td&gt;Link&lt;/td&gt;
          &lt;td&gt;Notes&lt;/td&gt; 
      &lt;/tr&gt;
      &lt;tr data-state="california"&gt;
        &lt;td&gt;Joe Smith&lt;/td&gt;
        &lt;td&gt;Acme&lt;/td&gt;
        &lt;td&gt;www.www.com&lt;/td&gt;
        &lt;td&gt;n/a&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr data-state="california"&gt;
        &lt;td&gt;Sue Smith&lt;/td&gt;
        &lt;td&gt;Acme&lt;/td&gt;
        &lt;td&gt;www.www.com&lt;/td&gt;
        &lt;td&gt;n/a&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr data-state="california"&gt;
        &lt;td&gt;Frank Jones&lt;/td&gt;
        &lt;td&gt;Etc&lt;/td&gt;
        &lt;td&gt;www.www.com&lt;/td&gt;
        &lt;td&gt;n/a&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th colspan="4"&gt;
              Alaska
          &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr data-state="alaska"&gt;
        &lt;td&gt;Sue Henderson&lt;/td&gt;
        &lt;td&gt;Acme&lt;/td&gt;
        &lt;td&gt;www.com.com&lt;/td&gt;
        &lt;td&gt;n/a&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr data-state="alaska"&gt;
        &lt;td&gt;Jimmy Dean&lt;/td&gt;
        &lt;td&gt;Acme&lt;/td&gt;
        &lt;td&gt;www.com.com&lt;/td&gt;
        &lt;td&gt;n/a&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$("input#search").keyup(function(){
          var filter = $(this).val();
          var regExPattern = "gi";
          var regEx = new RegExp(filter, regExPattern);   
          $("table tr").each(function(){
          if (
          $(this).text().search(new RegExp(filter, "i")) &lt; 0 &amp;&amp;
          $(this).data('state').search(regEx) &lt; 0 
          ){
                  $(this).hide();
              } else {
                  $(this).show();
              }        
          });
  });
  </code></pre>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/Q3cvH/17/" rel="nofollow">http://jsfiddle.net/Q3cvH/17/</a></p>