jQuer实时监控input对table进行筛选
记得以前写过一个预定表格~~~~~比这个更难,一大串前端js~~~忘了~~~好记性不如烂笔头~~记录下,既帮助别人,也帮助自己~~~
实现思路~通过.on监听input标签的内容变化,通过this获取到val,通过.hide隐藏未匹配标签~~~大致这样
- oninput是HTML5的标准事件
- 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化,
- 在内容修改后立即被触发,不像onchange事件需要失去焦点才触发
- oninput事件在IE9以下版本不支持,需要使用IE特有的onpropertychange事件替代
- 使用jQuery库的话直接使用on同时绑定这两个事件即可。
<input type="text" class="form-control" id="item_keyword"
name="item_keyword" placeholder="请输入关键字查找">
input代码
<script src="/static/js/jquery-3.1.1.min.js"></script>
<script >
/* 实时搜索框,及点击按钮全选\取消*/
$('#item_keyword').on('input propertychange', function() {
console.log( $(this).val());
$('table tbody tr').hide()
.filter(":contains('" + ($(this).val()) + "')")
.show();
});
</script>
JS代码
jQuer实时监控input对table进行筛选的更多相关文章
- 移动端(html5)微信公众号下用keyup实时监控input值的变化无效
搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公 ...
- 实时监控input输入值变化
在web开发中,我们有时会需要动态监听输入框值的变化,当使用onkeydown.onkeypress.onkeyup作为监听事件时,会发现一些复制粘贴等操作用不了,同时,在处理组合快键键的时候也很麻烦 ...
- 改造断路器集群监控Hystrix Turbine实现自动注册消费者、实时监控多个服务
在上一篇文章中,我们搭建了Hystrix Dashoard,对指定接口进行监控.但是只能对一个接口进行监听,功能比较局限: Turbine:汇总系统内多个服务的数据并显示到 Hystrix Dashb ...
- Spotlight实时监控Windows Server 2008
Windows Server 2008作为服务器平台已逐渐被推广和应用,丰富的功能和良好的稳定性为其赢得了不错的口碑.但是和Windows Server 2003相比,其系统的自我监控功能并没有多大的 ...
- C#实现对文件目录的实时监控
本文主要描述如何通过C#实现实时监控文件目录下的变化,包括文件和目录的添加,删除,修改和重命名等操作. 首先,我们需要对.net提供的FileSystemWatcher类有所了解.我有些懒,找了MSD ...
- java利用WatchService实时监控某个目录下的文件变化并按行解析(注:附源代码)
首先说下需求:通过ftp上传约定格式的文件到服务器指定目录下,应用程序能实时监控该目录下文件变化,如果上传的文件格式符合要求,将将按照每一行读取解析再写入到数据库,解析完之后再将文件改名. 一. 一开 ...
- 【转】Spotlight实时监控Windows Server 2008
Windows Server 2008作为服务器平台已逐渐被推广和应用,丰富的功能和良好的稳定性为其赢得了不错的口碑.但是和Windows Server 2003相比,其系统的自我监控功能并没有多大的 ...
- JQuery实时监控文本框字符变化
$(function(){ $('input[name="addr"]').on('input propertychange', function() { if ($('input ...
- Jmeter实时监控+SpringBoot接口性能实战
性能测试 Jmeter实时监控+SpringBoot接口性能实战 自动化 SpringBoot Java Jmeter实时监控+SpringBoot接口性能实战 一.实验目的及实验环境 1.1.实验目 ...
随机推荐
- 洛谷 P3909 异或之积 题解
原题链接 本人看了其它解法,发现本人的解法还是 首创 ! 而且我的解法好像和 \(\times 6\) 没什么关系 -- (如果没 \(\times 6\),我没还不用算逆元) 别人的思路呢,大都是从 ...
- Filebeat快速入门
Filebeat快速入门 本笔记整理于https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-installation.html ...
- 带有路径压缩和rank优化的并查集实现
public class unionfind2 implements UF { int[] parent; int[] rank; public unionfind2(int n) { parent= ...
- .NET Core技术研究-配置读取
升级ASP.NET Core后,配置的读取是第一个要明确的技术.原先的App.Config.Web.Config.自定义Config在ASP.NET Core中如何正常使用.有必要好好总结整理一下,相 ...
- 给Linux命令设置别名的几个步骤
1.查看系统中的别名 alias 2.临时更改别名 alias rm='command not found.' 3.永久更改别名 vim /etc/profile ---> 最后一行添加 ali ...
- RecyclerView的刷新分页
在开发中常常使用到刷新分页,这里实现一个 RecyclerView 的简单的刷新分页操作,测试效果见文末,实现过程参考如下: 实现思路 加载更多数据使用到 RecyclerView 加载多种布局,根据 ...
- winsocket编程笔记(一)
前言: 因为疫情原因,现在一直在网上授课,教师在讲述winsocket这一课程时没有给予我们课本,只有毫不相搭的linux环境的socket编程视频,故于此(开学第七周)总结winsocket的内容. ...
- Django-使用 include() 配置 URL
如果项目非常庞大,应用非常多,应用的 URL 都写在根 urls.py 配置文件中的话,会显的非常杂乱,还会出现名称冲突之类的问题,这样对开发整个项目是非常不利的. 可以这样解决,把每个应用的 URL ...
- 性能测试环境搭建:XAMPP1.8+PHPwind9.0安装教程
1.安装准备 1.1软件版本 XAMPP的版本:XAMPP 1.8.2 phpwind的版本:PHPWind 9.0 1.2.安装环境 我的环境:win10 其实安装环境影响不大,win7,win ...
- P1343 地震逃生(最大流板题)
P1343 地震逃生 题目描述 汶川地震发生时,四川**中学正在上课,一看地震发生,老师们立刻带领x名学生逃跑,整个学校可以抽象地看成一个有向图,图中有n个点,m条边.1号点为教室,n号点为安全地带, ...