Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@jerrac

jerrac/jquerytablefilter.html

Created November 7, 2012 00:35
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jerrac/4028731 to your computer and use it in GitHub Desktop.
Save jerrac/4028731 to your computer and use it in GitHub Desktop.
Download ZIP
Quick filtering of a table with jQuery
Raw
jquerytablefilter.html
<html>
<head>
<title>jquery filter test</title>
</head>
<body>
<label>Filter: </label> <input id="inputfilter" type="text"></input>
<table id="filterme">
<thead>
<tr>
<th>
First Name
</th>
<th>Last Name</th>
<th>Tags</th>
</tr>
</thead>
<tbody>
<tr>
<td>David</td>
<td>Reagan</td>
<td>me, web, blah</td>
</tr>
<tr>
<td>Bob</td>
<td>Reagan</td>
<td>hope, joy, good</td>
</tr>
<tr>
<td>David</td>
<td>Johe</td>
<td>wow, no, yes</td>
</tr>
<tr>
<td>Toft</td>
<td>Smith</td>
<td>pop, soda, web, blah</td>
</tr>
<tr>
<td>David</td>
<td>Reagan</td>
<td>asdf, yah, web, blah</td>
</tr>
<tr>
<td>Dan</td>
<td>Smith</td>
<td>heck, this, blah</td>
</tr>
<tr>
<td>Lost</td>
<td>Man</td>
<td>web, blah</td>
</tr>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#inputfilter").keyup(function(){
filter = new RegExp($(this).val(),'i');
$("#filterme tbody tr").filter(function(){
$(this).each(function(){
found = false;
$(this).children().each(function(){
content = $(this).html();
if(content.match(filter))
{
found = true
}
});
if(!found)
{
$(this).hide();
}
else
{
$(this).show();
}
});
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment