Javascript 如何使用jQuery筛选表行
我在这里做了一张桌子:但我似乎无法让我的桌子过滤器工作。我试图做的是在顶部创建一个菜单,其中一个特定的过滤器将只显示这些行。我试着用Javascript 如何使用jQuery筛选表行,javascript,jquery,html-table,Javascript,Jquery,Html Table,我在这里做了一张桌子:但我似乎无法让我的桌子过滤器工作。我试图做的是在顶部创建一个菜单,其中一个特定的过滤器将只显示这些行。我试着用.Data来做这个 筛选行脚本 $('.filterMenu a').on('click', function(e){ e.preventDefault(); var c= $(this).data('qtype'); $('#questTable')[0].className = c; }); 行悬停脚本 $(document).ready(func
.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');
});
});
这是一个有效的例子
基本思想是首先隐藏所有行,然后在它们符合您的条件时递归显示它们
在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中数据qtype的输入错误msq->mcq
编辑:刚刚更新了小提琴,添加了更多评论,并修复了THAD区域非常出色,感谢您的快速响应