js實(shí)現(xiàn)篩選功能
本文實(shí)例為大家分享了js實(shí)現(xiàn)篩選功能的具體代碼,供大家參考,具體內(nèi)容如下
功能
通過復(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>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象
- 基于JavaScript實(shí)現(xiàn)前端數(shù)據(jù)多條件篩選功能
- JS實(shí)現(xiàn)table表格內(nèi)針對(duì)某列內(nèi)容進(jìn)行即時(shí)搜索篩選功能
- Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框示例代碼
- vuejs通過filterBy、orderBy實(shí)現(xiàn)搜索篩選、降序排序數(shù)據(jù)
- Vue.js實(shí)現(xiàn)多條件篩選、搜索、排序及分頁的表格功能
- JS實(shí)現(xiàn)商品篩選功能
- js實(shí)現(xiàn)表格篩選功能
- Jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象,Map()方法詳解以及數(shù)組中查詢某值是否存在
- angularjs 實(shí)現(xiàn)帶查找篩選功能的select下拉框?qū)嵗?/a>
相關(guān)文章
Javascript使用uploadify來實(shí)現(xiàn)多文件上傳
本篇文章主要介紹了Javascript使用uploadify來實(shí)現(xiàn)多文件上傳,具有一定的參考價(jià)值,有需要的可以了解一下。2016-11-11對(duì)TypeScript庫進(jìn)行單元測(cè)試的方法
這篇文章主要介紹了對(duì)TypeScript庫進(jìn)行單元測(cè)試的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07微信小程序自定義toast彈窗效果的實(shí)現(xiàn)代碼
微信小程序里面的自帶彈窗icon只有兩種,success和loading。這篇文章主要介紹了微信小程序之自定義toast彈窗效果的實(shí)現(xiàn)代碼 ,需要的朋友可以參考下2018-11-11動(dòng)態(tài)的綁定事件addEventListener方法的使用
本文為大家介紹下動(dòng)態(tài)的綁定事件的方法addEventListener的使用示例,不了解的朋友可以參考下2014-01-01微信小程序button標(biāo)簽open-type屬性原理解析
這篇文章主要介紹了微信小程序button標(biāo)簽open-type屬性原理解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01JS中字符串切割為數(shù)組/數(shù)組拼接為字符串的代碼例子
這篇文章主要給大家介紹了關(guān)于JS中字符串切割為數(shù)組/數(shù)組拼接為字符串的相關(guān)資料,數(shù)組是JavaScript中最強(qiáng)大的數(shù)據(jù)結(jié)構(gòu),我們常常通過將字符串轉(zhuǎn)換為數(shù)組來解決許多算法,需要的朋友可以參考下2023-09-09