通过jQuery实时监听表格行数变化
[本文出自天外归云的博客园]
使用bootstrap table组件,当使用过滤器的时候,页面的表格行数发生变化,此时需要统计表格行数。想要监听表格变化,如何做呢?
使用场景:有一个表格里放着许多测试用例,当使用过滤器的时候表格中测试用例的数量发生了变化,此时要重新统计表格中的测试用例个数并反馈在页面上。
这里设:表格的tbody元素的id为monitorTbody,反馈测试用例个数的div的id是caseCount。
下面是两种实现的方法:
// 实时监听DOM变化,方法1:jQuery监听div内容变化(使用这种方法注意id为caseCount的元素不要位于监听范围内,否则控制台会报错)
$('#monitorTbody').bind('DOMNodeInserted', function () {
var count = $("#monitorTbody").find("tr").length;
$("#caseCount").html("测试用例 " + count.toString() + "条过滤结果");
}); // 实时监听select组件变化,方法2:动态绑定select的change事件
$("select").change(function () {
//延时两秒执行
setTimeout(function () {
var count = $("#monitorTbody").find("tr").length;
$("#caseCount").html("测试用例 " + count.toString() + "条过滤结果");
}, 2000);
});
使用方法一需要注意:不要让id为caseCount的元素在id为monitorTbody的元素中,否则控制台会有无限递归报错。
通过jQuery实时监听表格行数变化的更多相关文章
- 使用jQuery实时监听input输入值的变化
//jQuery实时监听input值变化 $("#email").on("input propertychange",function(){ var str = ...
- jQuery实时监听input的值变化(input的值产生变化才会触发事件)
//用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...
- Js/jQuery实时监听input输入框值变化
前言在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满 ...
- jQuery 实时监听<input>输入值的变化
这方法比 on('keydown') 更实时 <input type='text' id='input1'/>$(document).ready(function(){ $('#input ...
- 移动端用js与jquery实时监听输入框值的改动
背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
- js与jquery实时监听输入框值变化方法
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...
- js与jquery实时监听输入框值的oninput与onpropertychange方法
文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监 ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- javascript --- 实时监听输入框值的变化
实时监听文本框值变化是非常常见的功能,通常最简单的办法就是用keyup,keydown来实现,但是这种方法有两个问题,一个是当直接复制粘贴的时候没法监听到事件,另外一个问题是在移动端,使用删除键删除输 ...
随机推荐
- mac安装Elasticsearch
去官网下载https://www.elastic.co/downloads/elasticsearch 本人使用的是2.3.2版本,我下载的是tar版本的,然后解压. 进入es的安装目录, cd el ...
- SpringBoot使用validator校验
在前台表单验证的时候,通常会校验一些数据的可行性,比如是否为空,长度,身份证,邮箱等等,那么这样是否是安全的呢,答案是否定的.因为也可以通过模拟前台请求等工具来直接提交到后台,比如postman这样的 ...
- Bluestein's Algorithm
网上很少有人提到,写的也很简单,事实上就是很简单... \(Bluestein's\ Algorithm\),用以解决任意长度\(DFT\). 考虑\(DFT\)的形式:\[\begin{aligne ...
- 2006 ACM 求奇数的和
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2006 注意 sum=1,写在while 不然每次结果会累积 #include <stdio.h> ...
- 潭州课堂25班:Ph201805201 爬虫高级 第九课 scrapyd 部署 (课堂笔记)
c rapyd是 scrapy 的部署, 是官方提供的一个爬虫管理工具, 通过他可以非常方便的上传控制爬虫的运行, 安装 : pip install scapyd 他提供了一个json ,web, s ...
- 通过按键实现LED灯的亮灭(含两种情况)
#include "stm32f10x.h"// 相当于51单片机中的 #include <reg51.h> #include "stm32f10x_gpio ...
- [POJ2287][Tyvj1048]田忌赛马 (贪心+DP)
瞎扯 很经典的一道题 考前才打 我太菜了QAQ 就是先贪心排序了好 然后在DP 这样比直接DP更容易理解 (其实这题做法还有很多) 代码 #include<cstdio> #include ...
- Java WebSocket HttpSession与WebSocket Session的关联
当HttpSession中止(通过显示地失效或超时)时,Web容器会把HttpSession属性从HttpSession中清除. javax.servlet.http.HttpSessionBindi ...
- css3实现不同的loading
样式1: <html> <head> <style type="text/css"> .loading { position: fixed; t ...
- web (Servlet)
1.如果你文档新建的出现很多红色的小擦擦出错 这样做