javascript - How to filter table rows with jQuery - Stack Overflow

admin管理员组

文章数量:1422437

I have made a table here : fiddle but I seem unable to get my table filter to work. What I tried to do was create a menu at the top where a specific filter would only show those rows. I tried to use .Data for this.

Filter Row Script

$('.filterMenu a').on('click', function(e){
  e.preventDefault();
  var c= $(this).data('qtype');
  $('#questTable')[0].className = c;
});

Row Hover Script

$(document).ready(function() {
    $('.table-row').hover(function() {             
        $(this).addClass('current-row');
        }, function() {
            $(this).removeClass('current-row');
        });
    });

Row hide Script

$(document).ready(function() {
    $('tr')
    .filter(':has(:checkbox:checked)')
    .addClass('selected')
    .end()
    .click(function(event) {
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger('click');
        }
    })
    .find(':checkbox')
    .click(function(event) {
        $(this).parents('tr:first').toggleClass('selected');
    });    
});

I have made a table here : fiddle but I seem unable to get my table filter to work. What I tried to do was create a menu at the top where a specific filter would only show those rows. I tried to use .Data for this.

Filter Row Script

$('.filterMenu a').on('click', function(e){
  e.preventDefault();
  var c= $(this).data('qtype');
  $('#questTable')[0].className = c;
});

Row Hover Script

$(document).ready(function() {
    $('.table-row').hover(function() {             
        $(this).addClass('current-row');
        }, function() {
            $(this).removeClass('current-row');
        });
    });

Row hide Script

$(document).ready(function() {
    $('tr')
    .filter(':has(:checkbox:checked)')
    .addClass('selected')
    .end()
    .click(function(event) {
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger('click');
        }
    })
    .find(':checkbox')
    .click(function(event) {
        $(this).parents('tr:first').toggleClass('selected');
    });    
});

• javascript
• jquery
• html-table

Share Improve this question Follow edited Aug 13, 2015 at 7:19 Alexis Tyler 96866 gold badges3232 silver badges5151 bronze badges asked Aug 13, 2015 at 6:18 RenierRenier 7311 silver badge1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Here is a working example

The basic idea is to first hide all rows and then recursively show them, when they match your criteria.

Find all tr in tbody and hide them

var trs = $("#questTable").find("tbody tr");
trs.hide();

I would make use of the filter function

.filter(function (i, v) {})

to check if the row should be shown.

trs.filter(function (i, v) {
  if ($(this).data("qtype") == c) {
      return true;
  }
  if(c=="all"){
      return true;
  }
    return false;
})

//just show the row if it fits the criteria
.show();

Additionally I have fixed your typo msq -> mcq for the data-qtype in tr

Edit: Just updated the fiddle with more ments and fixed the thead area

本文标签： javascriptHow to filter table rows with jQueryStack Overflow