[本文出自天外归云的博客园]

使用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实时监听表格行数变化的更多相关文章

  1. 使用jQuery实时监听input输入值的变化

    //jQuery实时监听input值变化 $("#email").on("input propertychange",function(){ var str = ...

  2. jQuery实时监听input的值变化(input的值产生变化才会触发事件)

    //用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...

  3. Js/jQuery实时监听input输入框值变化

    前言在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满 ...

  4. jQuery 实时监听<input>输入值的变化

    这方法比 on('keydown') 更实时 <input type='text' id='input1'/>$(document).ready(function(){ $('#input ...

  5. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

  6. js与jquery实时监听输入框值变化方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...

  7. js与jquery实时监听输入框值的oninput与onpropertychange方法

    文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监 ...

  8. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  9. javascript --- 实时监听输入框值的变化

    实时监听文本框值变化是非常常见的功能,通常最简单的办法就是用keyup,keydown来实现,但是这种方法有两个问题,一个是当直接复制粘贴的时候没法监听到事件,另外一个问题是在移动端,使用删除键删除输 ...

随机推荐

  1. mac安装Elasticsearch

    去官网下载https://www.elastic.co/downloads/elasticsearch 本人使用的是2.3.2版本,我下载的是tar版本的,然后解压. 进入es的安装目录, cd el ...

  2. SpringBoot使用validator校验

    在前台表单验证的时候,通常会校验一些数据的可行性,比如是否为空,长度,身份证,邮箱等等,那么这样是否是安全的呢,答案是否定的.因为也可以通过模拟前台请求等工具来直接提交到后台,比如postman这样的 ...

  3. Bluestein's Algorithm

    网上很少有人提到,写的也很简单,事实上就是很简单... \(Bluestein's\ Algorithm\),用以解决任意长度\(DFT\). 考虑\(DFT\)的形式:\[\begin{aligne ...

  4. 2006 ACM 求奇数的和

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2006 注意 sum=1,写在while 不然每次结果会累积 #include <stdio.h> ...

  5. 潭州课堂25班:Ph201805201 爬虫高级 第九课 scrapyd 部署 (课堂笔记)

    c rapyd是 scrapy 的部署, 是官方提供的一个爬虫管理工具, 通过他可以非常方便的上传控制爬虫的运行, 安装 : pip install scapyd 他提供了一个json ,web, s ...

  6. 通过按键实现LED灯的亮灭(含两种情况)

    #include "stm32f10x.h"// 相当于51单片机中的 #include <reg51.h> #include "stm32f10x_gpio ...

  7. [POJ2287][Tyvj1048]田忌赛马 (贪心+DP)

    瞎扯 很经典的一道题 考前才打 我太菜了QAQ 就是先贪心排序了好 然后在DP 这样比直接DP更容易理解 (其实这题做法还有很多) 代码 #include<cstdio> #include ...

  8. Java WebSocket HttpSession与WebSocket Session的关联

    当HttpSession中止(通过显示地失效或超时)时,Web容器会把HttpSession属性从HttpSession中清除. javax.servlet.http.HttpSessionBindi ...

  9. css3实现不同的loading

    样式1: <html> <head> <style type="text/css"> .loading { position: fixed; t ...

  10. web (Servlet)

    1.如果你文档新建的出现很多红色的小擦擦出错 这样做