HTML-таблица фильтрации по тексту и изображению

Question

У меня есть таблица HTML с текстом и значками. Я пытаюсь сделать фильтр/поиск по тексту или/или изображению. Теперь работает фильтрация изображений. Мне интересно, как добавить функции текстового поиска.

<div id="usertable"> 
<div class="choicebox"> 
    <div id="choicebox"> 
     <table> 
      <tr> 
       <td> <a id="all">ALL</a> 

       </td> 
       <td> 
        <img id="admin" src="http://icons.iconarchive.com/icons/iconshock/windows-7-general/256/administrator-icon.png" width="30" height="30"> 
       </td> 
       <td> 
        <img id="member" src="http://blog.getjobber.com/wp-content/uploads/2013/01/Users-Image.png" width="30" height="30"> 
       </td> 
       <td> 
        <input id="search"></input> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 
<div class="userbox"> 
    <table id="tablelist"> 
     <tr class="rowHeader"> 
      <td colspan="7"> 
       <div class="firstrow"> 
        <div>User List</div> 
       </div> 
      </td> 
     </tr> 
     <tr class="rowHeader"> 
      <td>Name</td> 
      <td>User ID</td> 
      <td>Password</td> 
      <td>Organisation</td> 
      <td>Role</td> 
      <td>Status</td> 
      <td>Extra</td> 
     </tr> 
     <tr> 
      <td>John</td> 
      <td>2325</td> 
      <td>Admin Password</td> 
      <td>Park</td> 
      <td>Admin</td> 
      <td>Admin Status</td> 
      <td><img class="admin" src="http://icons.iconarchive.com/icons/iconshock/windows-7-general/256/administrator-icon.png" width="30" height="30"></td> 
     </tr> 
     <tr> 
      <td>Dave</td> 
      <td>5598</td> 
      <td>Member Password</td> 
      <td>Club</td> 
      <td>Member</td> 
      <td>Admin Status</td> 
      <td><img class="user" src="http://blog.getjobber.com/wp-content/uploads/2013/01/Users-Image.png" width="30" height="30"></td> 
     </tr> 
     <tr> 
      <td>Jane</td> 
      <td>6587</td> 
      <td>Admin Password</td> 
      <td>Garden</td> 
      <td>Admin</td> 
      <td>Admin Status</td> 
      <td><img class="admin" src="http://icons.iconarchive.com/icons/iconshock/windows-7-general/256/administrator-icon.png" width="30" height="30"></td> 
     </tr> 
     <tr> 
      <td>Paul</td> 
      <td>2254</td> 
      <td>Member Password</td> 
      <td>Parking</td> 
      <td>Member</td> 
      <td>Admin Status</td> 
      <td><img class="user" src="http://blog.getjobber.com/wp-content/uploads/2013/01/Users-Image.png" width="30" height="30"></td> 
     </tr> 
    </table> 
</div> 

JS часть выглядит следующим образом:

$(document).ready(function() { 
alternateRowColor(); 

$('#admin').on('click', function() { 
    $('#tablelist tr').each(function() { 
     $(this).show(0); 
     if ($.trim($(this).find('img').attr('class')) != 'admin') { 
      $(this).not('.rowHeader').hide(0); 
     } 
    }); 
    alternateRowColor(); 
}); 
$('#member').on('click', function() { 
    $('#tablelist tr').each(function() { 
     $(this).show(0); 
     if ($.trim($(this).find('img').attr('class')) != 'user') { 
      $(this).not('.rowHeader').hide(0); 
     } 
    }); 
    alternateRowColor(); 
}); 
$('#all').on('click', function() { 
    $('#tablelist tr').each(function() { 
     $(this).show(0); 
    }); 
    alternateRowColor(); 
    }); 
}); 
function alternateRowColor() { 
    var i = 0; 
    $('#tablelist tr:visible').each(function() { 
     if (i % 2 === 0) $(this).removeClass('odd').addClass('even'); 
     else $(this).removeClass('even').addClass('odd'); 
     i++; 
    }); 
} 

Вот JSFidle для этого http://jsfiddle.net/zaga/j8hw023o/7/

Answer 1

вы можете сделать,

$("#search").on('keyup', function() { 
    var input = this.value.toLowerCase(); 

    $("#usertable table tr:hidden").show(); 
    $("#tablelist tr:not(.rowHeader)").filter(function() { 
     return $(this).find("td:first-child").text().toLowerCase().indexOf(input) < 0; 
    }).hide();  
}); 

Fiddle Demo