Highlight

by David Buzatto

HTML

<table id="grid">
  <tbody>
    <tr>
      <td>foo 01</td>
      <td>foo 01</td>
      <td>foofoo 01</td>
    </tr>
    <tr>
      <td>bar 02</td>
      <td>bar 02</td>
      <td>barbar 02</td>
    </tr>
    <tr>
      <td>foo 03</td>
      <td>bar 03</td>
      <td>foobar 03</td>
    </tr>
  </tbody>
</table>
<input id="inputSearch"/>

CSS

.highlight { 
    background-color: yellow;
}

JavaScript

$( "#inputSearch" ).on( "keyup", function(e) {

  reset();
  
	var v = this.value;
  
  $( "#grid > tbody  > tr" ).each( function () {  
  
    var found = false;
    
    $(this).find( "td" ).each( function () {
      var tdV = $(this).html();
      var ind = tdV.indexOf(v);
      if ( ind != -1 ) {
        tdV = replaceAll( tdV, v, '<span class="highlight">' + v + '</span>' );
        $(this).html(tdV);
        found = true;
      }
    });
    
    if ( !found ) {
      $(this).hide();
    }
    
  });
  
});

function reset() {
	$( "#grid > tbody  > tr" ).each( function () {
    $(this).show();
    $(this).find( "td" ).each( function () {
      var tdV = $(this).html();
      tdV = replaceAll( tdV, '<span class="highlight">', '' );
      tdV = replaceAll( tdV, '</span>', '' );
      $(this).html(tdV);
    });
  });
}

function replaceAll( target, search, replacement ) {
    return target.split(search).join(replacement);
};