jQuery addClass example

Change class name on click in jQuery

HTML

<div class="input-group">
    <input class="form-control" id="search" type="text">
</div>

<table id="table" class="table paginated table-hover no-wrap">  
  <tr><td>PHP</td></tr>
  <tr><td>C#</td></tr>
  <tr><td>Javascript</td></tr>
  <tr><td>Jquery</td></tr>
  <tr><td>SQL</td></tr>
</table>
<br><br>

<div class="input-group">
    <input class="form-control" id="search2" type="text">
</div>
<table id="table2" class="table paginated table-hover no-wrap">  
  <tr><td>Bootstrap</td></tr>
  <tr><td>Java</td></tr>
  <tr><td>C++</td></tr>
  <tr><td>Pyton</td></tr>
</table>

CSS

.table {border: 1px solid red}

JavaScript

var $rows = $('#table 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();
});

var $rows2 = $('#table2 tbody tr');
$('#search2').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows2.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});