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


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


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

The jQuery Code

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.

Related Posts

54 thoughts on “Searching text in a HTML table using jQuery”

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

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

    bt i found that 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..


  3. 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.

  4. 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

  5. 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?


  6. 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 :)

  7. Thanks dude.. I need to display the search value alone.
    For eg, I am searching the word “Call”, i need get a result “Doctor on Call, Parking” not the all the values in a row.

  8. thanks very much for this code.
    Is it possible to highlight, lets say in yellow the search result when dynamically searching

  9. I am trying to implement it in multiple tables not nested tables in a single page…but its not working properly…what is the solution?

    1. Yes please, great post btw. Id like to instead of remove items from table, highlight the items that match. I tried messing with the code but I can get it to apply a class but once it highlihts an item, if you change the search input the class wont come off. I also tried toggle but that was a bust too.

      Appreciateyour help!

  10. yes it s wonderful, but i tried to export HTML result table to Excel Spreasheet, unfortunaly, it export ALL rows, how can i export just retrieved rows?

Leave a Reply