[英]jQuery Filter Data in table
I have a table of data on my page and then a couple of buttons that the user can click on. 我的页面上有一个数据表,然后有几个用户可以单击的按钮。 Depending on which button is clicked, it will show/hide rows in the table which match the criteria of the button clicked.
根据所单击的按钮,它将显示/隐藏表中与所单击按钮的条件匹配的行。
Below you will see my HTML table as well as the switch statement that is triggered when the button is clicked. 在下面,您将看到我的HTML表以及单击该按钮时触发的switch语句。
My table contains data in the tr
class with the criteria which are regions. 我的表包含
tr
类中的数据,条件是区域。 If a user wants to see only results that impact the EMEA
region, they can click on the EMEA
button. 如果用户只想查看影响
EMEA
地区的结果,则可以单击EMEA
按钮。 When they do click EMEA
, it will hide all table rows where EMEA
is not found in the tr
class. 当他们单击
EMEA
,它将隐藏tr
类中未找到EMEA
所有表行。
The two statements I am having trouble with are global
and multiple
. 我遇到的两个问题是
global
和multiple
。
If global
is selected, all 3 regions must be in the class. 如果选择了
global
,则所有3个区域都必须在该类中。 If multiple
is selected, at least two of the regions needs to be in the class. 如果选择了
multiple
,则类别中至少需要两个区域。
Any thoughts? 有什么想法吗?
// Here is my table of data
<table class="res">
<thead>
<tr>
<td>Blah</td>
</tr>
</thead>
<tbody class="results">
<tr class="EMEA APAC">
<td>I Impact Two Regions (Multiple)</td>
</tr>
<tr class="EMEA">
<td>I Impact One Region (EMEA)</td>
</tr>
<tr class="EMEA APAC AMERICAS">
<td>I Impact All Regions (Global)</td>
</tr>
</tbody>
</table>
...
Buttons on the page trigger the below switch statement
...
// When clicking on the filter button such as "Multiple, Global, or EMEA"
switch (type) {
case 'global':
// If we impact all 3 regions..
$('.res').find('.results tr').each(function() {
// If this row doesn't have all 3 regions, we hide it
});
break;
case 'multiple':
// If we impact any combination of two regions
$('.res').find('.results tr').each(function() {
// If this row doesn't have a combination of any two regions, we hide it
});
break;
case 'EMEA':
// If we impact EMEA
$('.res').find('.results tr').each(function() {
// If this row doesn't have only the EMEA region, we hide it
});
break;
}
switch (type) {
case 'global':
// If we impact all 3 regions..
$('.res').find('.results tr').each(function() {
// If this row doesn't have all 3 regions, we hide it
//classes is an array of all the classes applied to the element
var classes = $(this).attr('class').split(/\s+/);
if(!(classes.indexOf('EMEA')>-1 && classes.indexOf('APAC')>-1 && classes.indexOf('AMERICAS')>-1))
{
$(this).hide();
}
});
break;
case 'multiple':
// If we impact any combination of two regions
$('.res').find('.results tr').each(function() {
// If this row doesn't have a combination of any two regions, we hide it
var classes = $(this).attr('class').split(/\s+/);
if(!($.unique(classes).length>1))
{
$(this).hide();
}
});
break;
case 'EMEA':
// If we impact EMEA
$('.res').find('.results tr').each(function() {
// If this row doesn't have only the EMEA region, we hide it
var classes = $(this).attr('class').split(/\s+/);
if(!(classes.indexOf('EMEA')>-1))
{
$(this).hide();
}
});
break;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.