title: How to highlight table row when searching instead of just text?
body: <p>I have a jQuery script that uses a simple text input to search for a string. If it finds the string, it highlights only the string itself.  All of my data is inside a table, so I'm wondering if it is possible to highlight the entire row if it finds the string anywhere in the row?</p>
  
  <p>This JS Fiddle has a working demo: <a href="http://jsfiddle.net/s8fTA/" rel="nofollow">http://jsfiddle.net/s8fTA/</a></p>
  
  <p>This script uses the search string, but calls the highlight script that is below:</p>
  
  <pre><code>$(function() {
  
  var search = $('.beer-search'),
      content = $('.beer-list'),
      matches = $(), index = 0;
  
  // Listen for the text input event
  search.on('input', function(e) {
  
      // Only search for strings 2 characters or more
      if (search.val().length &gt;= 2) {
  
          // Use the highlight plugin
          content.highlight(search.val(), function(found) {
          });
      }
      else {
          content.highlightRestore();
      }
  
  });
  
  });
  </code></pre>
  
  <p>Highlight script:
  (function($) {</p>
  
  <pre><code>var termPattern;
  
  $.fn.highlight = function(term, callback) {
  
      return this.each(function() {
  
          var elem = $(this);
  
          if (!elem.data('highlight-original')) {
  
              // Save the original element content
              elem.data('highlight-original', elem.html());
  
          } else {
  
              // restore the original content
              elem.highlightRestore();
  
          }
  
          termPattern = new RegExp('(' + term + ')', 'ig');
  
          // Search the element's contents
          walk(elem);
  
          // Trigger the callback
          callback &amp;&amp; callback(elem.find('.match'));
  
      });
  };
  
  $.fn.highlightRestore = function() {
  
      return this.each(function() {
          var elem = $(this);
          elem.html(elem.data('highlight-original'));
      });
  
  };
  
  function walk(elem) {
  
      elem.contents().each(function() {
  
          if (this.nodeType == 3) { // text node
  
              if (termPattern.test(this.nodeValue)) {
                  $(this).replaceWith(this.nodeValue.replace(termPattern, '&lt;span class="match"&gt;$1&lt;/span&gt;'));
              }
          } else {
              walk($(this));
          }
      });
  }
  
  })(jQuery); 
  </code></pre>