如何使用jQuery筛选表格行

Question

如何使用jQuery筛选表格行

4

我在这里制作了一个表格：fiddle，但似乎无法使我的表格筛选器起作用。我尝试创建一个菜单，在顶部只显示特定过滤器的行。我尝试使用.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');
    });    
});

- Renier

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bloC · Accepted Answer

这里是一个可用的示例。

基本思路是先隐藏所有行，然后递归显示符合条件的行。

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

此外，我已经为表格中 data-qtype 的 msq 更正为 mcq，以此来修复您的拼写错误。

编辑：我刚刚更新了 fiddle，并添加了更多注释，同时还修复了 thead 区域的问题。