jQuery按两个值过滤 [英] Jquery filtering by two values
问题描述
这一次我在jQuery过滤方面遇到问题.
This time I have a problem with jQuery filtering.
$( document ).ready(function() {
$('#search').keyup(function() {
var s = new RegExp(this.value);
$('#support-tasks-table tbody tr').each(function() {
if(s.test(this.cells[8].innerHTML))
$(this).show();
else $(this).hide();
});
});
$('select#sel-supporttask-projects').change(function() {
var s = new RegExp(this.value);
$('#support-tasks-table tbody tr').each(function() {
if(s.test(this.cells[3].innerHTML)) $(this).show();
else $(this).hide();
});
});
})
每个函数都按单元格值隐藏或显示表tr,并且工作正常.但是,当我在搜索中设置内容时,然后从select中选择选项,它会忽略tr的隐藏,并从表中的所有tr进行搜索.有没有简单的方法可以更改此代码以仅按显示的tr进行搜索?
Each of this functions hides or shows table tr's by cell value and it's working fine. But when I set something on search, and after that I choose the option from select, it ignores that tr's are hidden and searching from all tr's in a table. Is there any easy way to change this code to search only by showed tr's?
推荐答案
简单的答案是将:visible
添加到选择器:
The simple answer is to add :visible
to the selector:
$('select#sel-supporttask-projects').change(function() {
var s = new RegExp(this.value);
$('#support-tasks-table tbody tr:visible').each(function() {
if(s.test(this.cells[3].innerHTML)) $(this).show();
else $(this).hide();
});
});
但是它突出了一个设计缺陷:如果选择其他选项,则希望一些以前不可见的答案变得可见.
But it highlights a design flaw: if you select a different option, you would want some answers that were previously invisible to become visible.
本质上,您需要一个包含两个搜索过滤器的searchParameters
类:
Essentially, you need to have a searchParameters
class that includes both search filters:
var searchParameters = {
supportTask: null,
searchRegex: null
};
function shouldRowBeVisible(row) {
if(searchParameters.supportTask) {
if(!(searchParameters.supportTask.test(row.cells[3].innerHTML))) {
return false;
}
}
if(searchParameters.searchRegex) {
if(!(searchParameters.searchRegex.test(row.cells[3].innerHTML))) {
return false;
}
}
return true;
}
function updateVisibility() {
$('#support-tasks-table tbody tr').each(function() {
if(shouldRowBeVisible(this) {
$(this).show();
} else {
$(this).hide();
}
});
}
$('#search').keyup(function() {
searchParameters.searchRegex = new RegExp(this.value);
updateVisibility();
});
$('select#sel-supporttask-projects').change(function() {
searchParameters.supportTask = new RegExp(this.value);
updateVisibility();
});
这篇关于jQuery按两个值过滤的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!