Jquery按两个值过滤

这次我遇到了jQuery过滤问题。

$( 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来搜索？

Answer 1

简单的答案是添加:visible对选择器:visible ：

 $('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(); }); }); 

但它突出了一个设计缺陷：如果你选择一个不同的选项，你会希望一些以前看不见的答案变得可见。

基本上，您需要一个包含搜索filter的searchParameters类：

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