Question

我有一个页面，每个区域都有多个标签。

在页面加载时，我将所有数据加载到一个隐藏表中，当您单击选项卡时，它会拉入表格并过滤数据（删除该选项卡不需要的行）。

例如，我的表中的每个tr都有一个带有区域名称的类。

<tr class="americas emea apac"></tr>＆lt; - 此行属于这3个区域。

我有一个标签，例如只显示美洲数据：

$('#' + tab).find("#trainingEvents .results tr:not(.Americas)").remove();这会从表中删除课程中没有americas的所有行。

我的目标是现在制定一个条件，其中所有3个都是必需的。

当我点击＆＃34; Global＆＃34;时，该行必须包含所有3个类，否则将从表中删除。

实现这一目标的最佳方法是什么？我在考虑contains但如果只满足其中一个就会true。

Answer 1

我认为您可以使用.filter()来完成您想要的任务：

＆＃13;

function filterTable(selector) {
 $("table tr").hide().filter(selector).show(); 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr class="americas emea apac">
    <td>americas emea apac</td>
  </tr>
  <tr class="americas">
    <td>americas</td>
  </tr>
  <tr class="americas emea">
    <td>americas emea</td>
  </tr>
  <tr class="apac">
    <td>apac</td>
  </tr>
</table>
<input type="button" value="Americas" onclick="filterTable('.americas');" />
<input type="button" value="EMEA" onclick="filterTable('.emea');" />
<input type="button" value="APAC" onclick="filterTable('.apac');" />
<input type="button" value="Global" onclick="filterTable('.americas.emea.apac');" />

＆＃13;

jQuery显示符合条件的行

1 个答案: