使用JS怎样完成对内容进行筛选的功能？

发布时间：2022-01-12 13:17 所属栏目：13 来源：互联网

导读：当我们需要在众多信息中，找我们想要的信息时，筛选功能就会方便很多。对此，这篇文章就给大家分享一下使用JS实现对内容进行筛选的功能，可以应用的常见有很多，感兴趣的朋友可以参考。功能通过复选框对显示内容进行筛选，如，勾选后仅显示在线用户。代码

当我们需要在众多信息中，找我们想要的信息时，筛选功能就会方便很多。对此，这篇文章就给大家分享一下使用JS实现对内容进行筛选的功能，可以应用的常见有很多，感兴趣的朋友可以参考。

    功能

通过复选框对显示内容进行筛选，如，勾选后仅显示在线用户。

    代码

    js

    ※需 jQuery。

function filter() {
var check =document.getElementById('checkbox');
var members = $('.member');
var status = $('.memberStatus');
if (check.checked) {
members.each(function(i, member) {
if (status[i].innerText == 'Offline') {
member.style.display = 'none';
}
});
} else {
  members.each(function(i, member) {
   member.style.display = '';
  });
}
}
    html

<input type="checkbox" name="onlineOnly" tabindex="0" id="checkbox" onclick="filter()">
<span>Show online users only</span>
<table>
<tr class="member">
<td>
  UserA
</td>
<td class="memberStatus">
  Online
</td>
</tr>
<tr class="member">
<td>
  UserB
</td>
<td class="memberStatus">
  Offline
</td>
</tr>
<tr class="member">
<td>
  UserC
</td>
<td class="memberStatus">
  Online
</td>
</tr>
</table>

（编辑：ASP站长网）