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' 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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。
相關文章:
1. python如何換行輸出2. Python使用urlretrieve實現直接遠程下載圖片的示例代碼3. Python:UserWarning:此模式具有匹配組。要實際獲得組,請使用str.extract4. Android Studio中一套代碼多渠道打包的實現方法5. 詳解java google Thumbnails 圖片處理6. python如何計算圓的面積7. Java使用Tesseract-Ocr識別數字8. Android打包篇:Android Studio將代碼打包成jar包教程9. Java 接口和抽象類的區別詳解10. 解決Android Studio 格式化 Format代碼快捷鍵問題
