Adding a filter function to a table with JQuery

I had a requirement recently to add a filter function to a table.
It should look like that:

Here you have a regular table. In the table header you can insert your search string:

Here we go, our filtered results.

 

Doing that requires only a couple of lines with the wonderful JQuery.
The id of the table in this example is tblFunds. I added
a CSS class dontHide to rows, which represent group elements, in our
example these rows are “Europe” and “Australia”.

JQuery-Code

 

jQuery(document).ready(function() {
  jQuery("#tblFunds input").keyup(function() { 
    // look into every table row 
    // (but not the first one, which is the table header)
    jQuery("#tblFunds tr").not(":first").each(function() { 
      // get the text in our input field
      var txtToFind = jQuery("#tblFunds input").val(); 
      // now get the first column (td:eq(0)) in our current row
      var td = jQuery(this).find("td:eq(0)"); 
      // if the html element (i.e. the td) has a certain attribute, 
      // e.g. the class "dontHide", we're ignoring it
      if (td.hasClass("dontHide")) { 
        return; 
      } 
      // get the text in the current table cell (td-element)
      var txtInTd = td.text().trim(); 
      // If the current table cell matches our input string, show the line.
      // If not, hide the line
      if (txtInTd.indexOf(txtToFind) > -1) { 
        td.parent().show(); 
      } else { 
        td.parent().hide(); 
      } 
    }); 
  });
});

As you can see, this is quite straight forward. I guess, you can easily adapt the code example
to filter numbers as well, or you might even allow regular expressions in your filter.

Here you can download the example: tableWithFilter

Have fun!