title: Highlight td that contains searched text from input
body: <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;input type='text' id='search'&gt;
  &lt;table class='searchtbl'&gt;
     &lt;tr&gt;&lt;th&gt;ID&lt;/th&gt;&lt;th&gt;DESCRIPTION&lt;/th&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;&lt;input type='text' value='FROG'&gt;&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;&lt;input type='text' value='MOUSE'&gt;&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;&lt;input type='text' value='CAT'&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.highlighted {
      background-color: yellow;
  }
  </code></pre>
  
  <p>I'm trying to highlight the <code>&lt;td&gt;</code> that contains the search term, wether it is in the td or in the input, from <code>#search</code> by adding <code>.highlighted</code> class to it:</p>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$("#search").keyup(function () {
      var data = this.value.toUpperCase().split(" ");    
      $(".searchtbl").find("tr").not("tr:first").find("td").each(function (index, elem) {
      var $elem = $(elem);
          for (var d = 0; d &lt; data.length; ++d) {
              // Highlight
              if ($elem.text().toUpperCase().indexOf(data[d]) != -1) {
                  $elem.addClass('highlighted');   
              } else {
                  $elem.removeClass('highlighted');   
              }
          }
      })     
  }) 
  </code></pre>
  
  <p>For some reason it is not highlighting the cell.</p>
  
  <p><a href="https://jsfiddle.net/fabriziomazzoni79/zpaLv4pm/" rel="nofollow">https://jsfiddle.net/fabriziomazzoni79/zpaLv4pm/</a></p>