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

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

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

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

功能

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

代碼

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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
篩選

JS時間戳與日期格式的轉(zhuǎn)換小結
這篇文章主要介紹了JS時間戳與日期格式的轉(zhuǎn)換小結,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-01-01
微信小程序開發(fā)animation心跳動畫效果
這篇文章主要為大家詳細介紹了微信小程序開發(fā)animation心跳動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
Javascript類型判斷相關例題及解析
這篇文章主要介紹了Javascript類型判斷相關例題及解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-08-08
JS獲取checkbox的個數(shù)簡單實例
下面小編就為大家?guī)硪黄狫S獲取checkbox的個數(shù)簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
解析JavaScript中 querySelector 與 getElementById 方法的區(qū)別
這篇文章主要介紹了JavaScript中 querySelector 與 getElementById 方法的區(qū)別,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-10-10
微信小程序?qū)崿F(xiàn)上傳視頻功能
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)上傳視頻功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
JavaScript練習小項目之修改div塊的顏色
這篇文章主要給大家介紹了關于JavaScript練習小項目之修改div塊的顏色的相關資料,文中通過舉例介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2023-01-01
各瀏覽器對click方法的支持差異小結
click方法可以用來模擬用戶點擊。有的瀏覽器中所有元素都具有click方法，有的瀏覽器則沒有。
2011-07-07
微信小程序 scroll-view 水平滾動實現(xiàn)過程解析
這篇文章主要介紹了微信小程序 scroll-view 水平滾動實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-10-10
JS正則截取兩個字符串之間及字符串前后內(nèi)容的方法
這篇文章主要介紹了JS正則截取兩個字符串之間及字符串前后內(nèi)容的方法,結合實例形式簡單分析了JS正則截取字符串操作的常用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2017-01-01