Searching text in a HTML table using jQuery

Filter Table

Here is the situation. You have a really long table with hundreds of rows and you want to filter the rows(instantly!) that contain a specific keyword in any of the table cells.

This article will show how this can be achieved with the help of jQuery.

View Demo

The HTML

Create a table with some rows with multiple cells. Put a textbox above the table in which search term will be entered.

<div class="tables">
	<p>
		<label for="search">
			<strong>Enter keyword to search </strong>
		</label>
		<input type="text" id="search"/>
		<label>e.g. bar, parking, tv</label>
	</p>
	<table width="100%" id="tblData" class="target" bgcolor="#ACAAFC">
		<tbody>
			<tr>
				<th width="10%">#</th>
				<th width="35%">Hotel Name</th>
				<th width="55%">Facilities</th>
			</tr>
			<tr>
				<td class="odd">1</td>
				<td class="odd">Manu Maharani</td>
				<td class="odd">Attached Bath, Bar, Swimming Pool, </td>
			</tr>
			<tr>
				<td class="even">2</td>
				<td class="even">Hill View</td>
				<td class="even">TV, In-Room Safe, Bar</td>
			</tr>
			<tr>
				<td class="odd">3</td>
				<td class="odd">Hotel Suba Galaxy</td>
				<td class="odd">Paid Internet Access, Coffee Shop, Spa</td>
			</tr>
			<tr>
				<td class="even">4</td>
				<td class="even">The Residence Hotel</td>
				<td class="even">Doctor on Call, Parking</td>
			</tr>
			<tr>
				<td class="odd">5</td>
				<td class="odd">The Taj</td>
				<td class="odd">Currency Exchange, Bar, Golf</td>
			</tr>
			<tr>
				<td class="even">6</td>
				<td class="even">Mumbai Grand</td>
				<td class="even">Jacuzzi, Spa, Coffee Shop</td>
			</tr>
			<tr>
				<td class="odd">7</td>
				<td class="odd">The Promenade</td>
				<td class="odd">Cable TV, Coffee Shop, Spa</td>
			</tr>
			<tr>
				<td class="even">8</td>
				<td class="even">Hotel Regency</td>
				<td class="even">Mini Bar,Golf, Spa, Sauna</td>
			</tr>
			<tr>
				<td class="odd">9</td>
				<td class="odd">Park Plaza</td>
				<td class="odd">Currency Exchange, Bar, Golf</td>
			</tr>
			<tr>
				<td class="even">10</td>
				<td class="even">The Mapple Inn</td>
				<td class="even">Jacuzzi, Spa, Coffee Shop</td>
			</tr>
			<tr>
				<td class="odd">11</td>
				<td class="odd">Cidade de Goa</td>
				<td class="odd">Cable TV, Coffee Shop, Spa</td>
			</tr>
			<tr>
				<td class="even">12</td>
				<td class="even">Saurabh Mountview</td>
				<td class="even">Doctor, Free Parking</td>
			</tr>
		</tbody>
	</table>
</div>

The CSS

Apply the following css to style the table and its cells.

body
{
	font-family:verdana,arial;
	font-size:13px;
	margin:0 auto;
	width:100%;
}
.tables
{
	border:1px solid #000;
	margin:0 auto;
	width:600px;
}
th,td
{
	padding:5px;
}
p
{
	background-color:#ACAAFC;
	padding:10px;
}
a
{
	color:#fff;
	text-decoration:none;
}
.even
{
	background-color:#fff;
	color:#343234;
}
.odd
{
	background-color:#DCDEFC;
	color:#343234;
}

The jQuery Code

$(document).ready(function()
{
	$('#search').keyup(function()
	{
		searchTable($(this).val());
	});
});

function searchTable(inputVal)
{
	var table = $('#tblData');
	table.find('tr').each(function(index, row)
	{
		var allCells = $(row).find('td');
		if(allCells.length > 0)
		{
			var found = false;
			allCells.each(function(index, td)
			{
				var regExp = new RegExp(inputVal, 'i');
				if(regExp.test($(td).text()))
				{
					found = true;
					return false;
				}
			});
			if(found == true)$(row).show();else $(row).hide();
		}
	});
}

View Demo

The jQuery code is simple. searchTable function is called on keyup of textbox. We search for all td elements in each row and then check for the inputted value. A regular expression is used to match the values. If a match is not found, we hide that row. Passing i as second parameter makes the search case-insensitive. Remove it if you want a case-sensitive search.

Another point to note is that this code will not work on nested tables i.e. if you have more tables inside cells.

Future enhancements will include developing it as a simple jQuery plugin and support for searching in nested tables.

25 thoughts on “Searching text in a HTML table using jQuery

  1. Pingback: jQuery Bot -- Topsy.com

  2. Ghulam Haider

    Bundle of thanks Vijay, you save my hrs and hrs…. you are great…. I really appreciate your skills.

    Reply
  3. jayant

    @author..
    this code is awesome even i used this code in my project

    bt i found that ..it only help me to search front value..

    but i have 100000 records and with paging size 10 then it not help me to fetch that records..

    pls

    Reply
  4. Jack Ren

    i used the example below for my project. It works fine but when i have about 1000 or more records, it is very slow. Can you let me know how to handle when the table has more than 1000 rows. It takes about 8 to 10 seconds for the search button to work when you have more records…thanks for your help..great website.

    Reply
  5. Zaz

    Nice champ, but what the number of showed rows, more specific : When I search in your search box, i want to get the number of rows (1 match is 1 row, 2 matches is 2 rows and so on

    Reply
  6. eric

    This Script is… Awesome!!!!

    One Favour:

    How can we have the script auto-execute if a value is present in the search field, when loading the page. where would the focus then execute command go?

    Thanks!

    Reply
  7. Krishna

    you have no idea how much u helped for a guy from singapore who is trying to implement search in a web page on saturday 9PM in office. Thanks :)

    Reply

Leave a Reply