How to filter table rows with jQuery

Question

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');
    });    
});

Answer 1

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 comments and fixed the thead area