jQuery 显示满足条件的行

jQuery show rows that meet criteria

本文关键字：条件 满足 显示 jQuery      更新时间：2023-09-26

我有一个页面，每个区域有多个选项卡。

在页面加载时，

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

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

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

例如，我有一个选项卡，仅显示美洲的数据：

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

我的目标是现在提出一个条件，要求所有 3

个。

当我单击"全局"时，该行必须包含所有 3 个类，否则将从表中删除。

实现这一目标的最佳方法是什么？我在想contains但如果只满足其中之一，那将是true的。

我认为您可以使用 .filter（） 来完成您想要的：

function filterTable(selector) {
 $("table tr").hide().filter(selector).show(); 
}
<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');" />

相关文章：