如何使用jQuery過濾表行

Question

我在這里做了一張桌子： 小提琴，但我似乎無法讓我的桌面過濾器工作。 我嘗試做的是在頂部創建一個菜單，其中特定的過濾器只顯示這些行。 我嘗試使用.Data 。

過濾行腳本

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

行懸停腳本

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

行隱藏腳本

$(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

這是一個有效的例子

基本思路是首先隱藏所有行，然后在符合條件時遞歸顯示它們。

找到tbody所有tr並隱藏它們

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

我會利用過濾功能

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

檢查是否應該顯示該行。

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();

另外我修復了你的拼寫錯誤msq - > mcq for tr中的data-qtype

編輯 ：剛剛用更多評論更新了小提琴並修復了thead區域