simple table filter with jquery


/ Published in: JavaScript
Save to your folder(s)

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


Copy this code and paste it in your HTML
  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. });

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.