js實現(xiàn)篩選功能
本文實例為大家分享了js實現(xiàn)篩選功能的具體代碼,供大家參考,具體內(nèi)容如下
功能
通過復(fù)選框?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' 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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. asp中將字符串轉(zhuǎn)數(shù)字的函數(shù)小結(jié)2. python mysql項目實戰(zhàn)及框架搭建過程3. 學(xué)習(xí)小實例--滾動條的簡單實現(xiàn)4. AJAX實現(xiàn)省市縣三級聯(lián)動效果5. JSP實現(xiàn)簡單網(wǎng)頁計算器6. ASP強制刷新網(wǎng)頁和判斷文件地址實例代碼7. Python基于數(shù)列實現(xiàn)購物車程序過程詳解8. 解析原生JS getComputedStyle9. 移動端HTML5實現(xiàn)拍照功能的兩種方法10. 完美實現(xiàn)CSS垂直居中的11種方法
