如何使用 jQuery 过滤 table 行

Question

我在这里做了一个 table : fiddle 但我似乎无法让我的 table 过滤器工作。我试图做的是在顶部创建一个菜单，其中特定的过滤器将只显示那些行。为此，我尝试使用 .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

Here 是一个工作示例

基本思想是首先隐藏所有行，然后在它们符合您的条件时递归显示它们。

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

此外，我已经为 tr

中的 data-qtype 修正了你的错字 msq -> mcq

编辑：刚刚用更多评论更新了fiddle并修复了thead区域

如何使用 jQuery 过滤 table 行

How to filter table rows with jQuery

javascript

jquery

html-table