js實(shí)現(xiàn)篩選功能

更新時(shí)間：2020年11月24日 17:30:15 作者：wjianbo

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)篩選功能的具體代碼，供大家參考，具體內(nèi)容如下

功能

通過(guò)復(fù)選框?qū)︼@示內(nèi)容進(jìn)行篩選，如，勾選后僅顯示在線用戶。

代碼

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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
篩選

相關(guān)文章

Javascript使用uploadify來(lái)實(shí)現(xiàn)多文件上傳
本篇文章主要介紹了Javascript使用uploadify來(lái)實(shí)現(xiàn)多文件上傳，具有一定的參考價(jià)值，有需要的可以了解一下。
2016-11-11
JavaScript類的寫法
這篇文章主要為大家詳細(xì)介紹了JavaScript類的寫法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
小程序?qū)崿F(xiàn)登錄功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)登錄功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
對(duì)TypeScript庫(kù)進(jìn)行單元測(cè)試的方法
這篇文章主要介紹了對(duì)TypeScript庫(kù)進(jìn)行單元測(cè)試的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
JavaScript多級(jí)判定代碼優(yōu)化淺析
這篇文章主要介紹了JavaScript多級(jí)判定代碼優(yōu)化，JavaScript用二元運(yùn)算符和if拆分優(yōu)化多級(jí)判定結(jié)構(gòu),?用JavaScript邏輯運(yùn)算符替換if-else結(jié)構(gòu)判定
2023-02-02
微信小程序自定義toast彈窗效果的實(shí)現(xiàn)代碼
微信小程序里面的自帶彈窗icon只有兩種，success和loading。這篇文章主要介紹了微信小程序之自定義toast彈窗效果的實(shí)現(xiàn)代碼 ,需要的朋友可以參考下
2018-11-11
Router解決跨模塊下的頁(yè)面跳轉(zhuǎn)示例
開(kāi)始模塊化開(kāi)發(fā)項(xiàng)目之后，一個(gè)很重要的問(wèn)題就是頁(yè)面見(jiàn)的跳轉(zhuǎn)問(wèn)題，這篇文章主要介紹了Router解決跨模塊下的頁(yè)面跳轉(zhuǎn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
動(dòng)態(tài)的綁定事件addEventListener方法的使用
本文為大家介紹下動(dòng)態(tài)的綁定事件的方法addEventListener的使用示例，不了解的朋友可以參考下
2014-01-01
微信小程序button標(biāo)簽open-type屬性原理解析
這篇文章主要介紹了微信小程序button標(biāo)簽open-type屬性原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-01-01
JS中字符串切割為數(shù)組/數(shù)組拼接為字符串的代碼例子
這篇文章主要給大家介紹了關(guān)于JS中字符串切割為數(shù)組/數(shù)組拼接為字符串的相關(guān)資料,數(shù)組是JavaScript中最強(qiáng)大的數(shù)據(jù)結(jié)構(gòu),我們常常通過(guò)將字符串轉(zhuǎn)換為數(shù)組來(lái)解決許多算法,需要的朋友可以參考下
2023-09-09