我要评论本文实例为大家分享了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" 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
- vue init初始化项目后 npm run dev报错 10% building modules 1/1 modules 0 activeevents
- axios 处理 302 状态码的解决方法
- [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/feature
- react-native 在新版Xcode（10+）中运行出现的问题： node_modules/react-native/third-party/glog-0.3.4 , C compiler cannot create executables
- 使用puppeteer爬取网站并抓出404无效链接
- 【angular2+typeScript+ng-zorro】Carousel 走马灯的左右方向控件实现
- Cannot read property 'tap' of undefined
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论