Posted By

bboydflo on 10/03/14


Tagged

table jquery filter


Versions (?)

simple table filter with jquery


 / Published in: JavaScript
 

URL: http://jsfiddle.net/bboydflo/0rbh76kj/

have to change this snippet in order to hide filtered rows. Not tried out yet, but works fine in the jsfiddle

  1. Original example here: http://jsfiddle.net/hHJxP/
  2. $(document).ready(function() {
  3. $("input#search").keyup(function() {
  4. var self = $(this);
  5. $("tbody td").css("border", "0px").each(function(i, obj) {
  6. if($(obj).html().toLowerCase().indexOf(self.val().toLowerCase()) > -1 && self.val()) {
  7. $(obj).css("border", "1px solid blue");
  8. }
  9. });
  10. });
  11. });
  12.  
  13. ---------------------------------------------
  14. changed to this
  15.  
  16. var columnFilter = 2;
  17.  
  18. // to apply the filter on the second column in a table
  19. $('body').on('keyup', '#input', function(e){
  20. try{
  21. var self = $(this);
  22. var value = $.trim(self.val()).toLowerCase();
  23. // apply the filter only on the iLocation column
  24. var locationFilter = 'td:nth-child('+columnFilter+')';
  25. $(locationFilter).each(function(i, val) {
  26. var cellContent = $.trim($(this).text()).toLowerCase();
  27. if(cellContent.indexOf(value) == -1)
  28. $(val).parent('tr').hide();
  29. else $(val).parent('tr').show();
  30. });
  31. } catch(e){
  32. console.log('Error! - ' +e);
  33. }
  34. });

Report this snippet  

You need to login to post a comment.