Ebooks for IT - free download

click below link to download free IT related eBooks (PDF format) and also search your favourite books.

Searching text in a HTML table using jQuery

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.

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();
  }
 });
}

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.