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.实验目 ...
随机推荐
- 题解 P4344 【[SHOI2015]脑洞治疗仪】
前言 这道题目呢,看上去很难,实际上我们可以用线段树解决这道题目. 正文 我们维护 sum.len.tag.lmax.rmax.ans. sum 就是这段区间非脑洞的个数 len 就是这段区间的长度 ...
- 动态规划-区间dp-Palindrome Removal
2019-11-09 10:31:09 问题描述: 问题求解: n = 100,典型的O(n ^ 3)的动规问题.一般来说这种O(n ^ 3)的问题可以考虑使用区间dp来解决. 区间dp是典型的三层结 ...
- leetcode 签到 面试题40. 最小的k个数
题目 输入整数数组 arr ,找出其中最小的 k 个数.例如,输入4.5.1.6.2.7.3.8这8个数字,则最小的4个数字是1.2.3.4. 示例 1: 输入:arr = [3,2,1], k = ...
- Spring02——Spring 中 Bean 的生命周期及其作用域
在前一篇文章中,我们已经介绍了 Spring IOC 的相关知识,今天将为个位介绍 Spring 中 Bean 的相关知识.关注我的公众号「Java面典」,每天 10:24 和你一起了解更多 Java ...
- varchar int 查询 到底什么情况下走索引?
一个字符类型的.一个int类型的,查询的时候到底会不会走索引,其实很多工作了几年的开发人员有时也会晕,下面就用具体事例来测试一下. 1. 准备工作 先准备2张表,以备后续测试使用. 表1:创建表te ...
- Jupyter Notebook自动补全
大多数程序员都非常熟悉不同的自动补全工具.然而,我注意到许多数据科学家还没有使用它.如果你是他们中的一员,是时候开始使用这个提高效率的工具了 什么是自动补全? 它是你的编程环境提供的一种功能,用于完成 ...
- Google AI推出新的大规模目标检测挑战赛
来源 | Towards Data Science 整理 | 磐石 就在几天前,Google AI在Kaggle上推出了一项名为Open Images Challenge的大规模目标检测竞赛.当今计算 ...
- SpringCloud配置中心config
1,配置中心可以用zookeeper来实现,也可以用apllo 来实现,springcloud 也自带了配置中心config Apollo 实现分布式配置中心 zookeeper:实现分布式配置中心, ...
- Python Tkinter Grid布局管理器详解
Grid(网格)布局管理器会将控件放置到一个二维的表格里.主控件被分割成一系列的行和列,表格中的每个单元(cell)都可以放置一个控件. 注意:不要试图在一个主窗口中混合使用pack和grid (1) ...
- Linux(Ubuntu)与windows实现文件共享
步骤:1.从网上下载VMware和Ubuntu的镜像文件 2.在虚拟机上安装Ubuntu系统 3.在安装好的系统中安装VMware tools 实现文件共享 4.在VMware中设置与windo ...