Search with in table

by Naresh

HTML

<input type="text" id="search" placeholder="Type to search">
<table id="table">
<thead>
<tr>
      <th>Fruit</th>
      <th>Color</th>
   </tr>
   </thead>
   <tbody id="tbody">
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
   </tbody>
</table>

CSS

body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
th {padding: 4px; border: 1px #CCC solid; width: 100px;background:blue;color:white;}

JavaScript

var $rows = $('#tbody tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    
    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});