js实现筛选功能
更新时间：2020年11月24日 17:30:15 作者：wjianbo
这篇文章主要为大家详细介绍了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" 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS时间戳与日期格式的转换小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要为大家详细介绍了微信小程序开发animation心跳动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了Javascript类型判断相关例题及解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
下面小编就为大家带来一篇JS获取checkbox的个数简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
解析JavaScript中 querySelector 与 getElementById 方法的区别
这篇文章主要介绍了JavaScript中 querySelector 与 getElementById 方法的区别,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
这篇文章主要为大家详细介绍了微信小程序实现上传视频功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要给大家介绍了关于JavaScript练习小项目之修改div块的颜色的相关资料,文中通过举例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-01-01
click方法可以用来模拟用户点击。有的浏览器中所有元素都具有click方法，有的浏览器则没有。2011-07-07
这篇文章主要介绍了微信小程序 scroll-view 水平滚动实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了JS正则截取两个字符串之间及字符串前后内容的方法,结合实例形式简单分析了JS正则截取字符串操作的常用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2017-01-01
最新评论