jQuery按两个值过滤

本文介绍了jQuery按两个值过滤的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

这一次我在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(); });