代码参考:

http://www.sharejs.com/codes/javascript/4289

http://www.jb51.net/article/103420.htm

https://www.zhihu.com/question/21652436/answer/18899099

1、无延迟版本

// 重写contains方法,使其筛选时忽略大小写,可以放在页面中,也可放在全局。
jQuery.expr[':'].contains = function (a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
}; $("#searchBox").keyup(function () {
$("table tbody tr").stop().hide() //将tbody中的tr都隐藏
.filter(":contains('"+($(this).val())+"')").show(); //,将符合条件的筛选出来
});

本例执行效率很高,同样适用div表格,将&("table tbody tr")适当调整即可。

2、略延迟版本

var k,
tFilter=function(value){// 表格内容筛选
// search code
$("table tbody tr").stop().hide();// 将tbody中的tr都隐藏
//.filter(":contains('" + (value) + "')").show(); //将符合条件的筛选出来
$("table tbody tr").filter(":contains('" + (value) + "')").show();
};
document.getElementById('searchBox').onkeydown=function(){// 输入触发
var self=this;
clearTimeout(k);
k=setTimeout(function(){
console.log(k);
tFilter(self.value);
},400);
};
// 如需忽略大小写,可添加1中的contains方法。

js实现前端动态筛选表格内容的更多相关文章

  1. js如何实现动态在表格中添加标题和去掉标题?

    js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...

  2. 纯JS实现前端动态分页码

    思路分析:有3种情况 第一种情况,当前页面curPage < 4 第二种情况,当前页面curPage == 4 第三种情况,当前页面curPage>4 此外,还要考虑,当前页码 curPa ...

  3. node生成excel,动态替换表格内容

    这里使用的是exceljs模块, 好上手,易操作 1. 大致使用步骤 npm install exceljs // 引用var Excel = require('exceljs'); // 创建一个w ...

  4. 向.net后端发送请求获取数据,在前端动态填充表格

    实现效果 实现步骤 通过Ajax请求的方式 1.在前端定义Table 2.通过Ajax向.net后端发送数据请求 3.在.net后端定义方法供前端调用,并返回所需的数据 4.通过构造字符串的方式,将后 ...

  5. js如何实现动态克隆一个表格?

    js如何实现动态克隆一个表格? 一.总结 1.通过innerHTML实现表格内容复制, 2.通过表格dom的属性(比如border)实现属性赋值, 3.通过表格dom的样式style实现样式的复制. ...

  6. JavaScript动态生成表格

    要求: HTML标签只写一行表头 通过JS来写动态的表格(有多少组数据,就自动创建多少行表格) 为学习和演示,采用固定的数据,不涉及调用后台数据 代码实现: HTML内容: <table cel ...

  7. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  8. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  9. [HTML]js动态修改表格里面的内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...

随机推荐

  1. 使用JMeter进行http压力测试

    一.背景及文档目的说明 采用JMeter测试工具对腾讯视频做负载测试,使用 JMeter图形结果和聚合图帮助测试系统在资源超负荷情况下的表现,以发现设计上的错误或验证系统的负载能力并估计系统瓶颈和并发 ...

  2. boost asio acceptor 构造

    boost::asio::io_service io_svc; boost::asio::ip::address_v4 lis_ip; // 默认监听本机所有IP boost::asio::ip::t ...

  3. BIO、NIO和AIO

    BIO(Blocking I/O)同步阻塞I/O 这是最基本与简单的I/O操作方式,其根本特性是做完一件事再去做另一件事,一件事一定要等前一件事做完,这很符合程序员传统的顺序来开发思想,因此BIO模型 ...

  4. vue之TodoMVC项目实战

    一.初始化项目 1.下载模板 进入github中https://github.com/tastejs/todomvc-app-template,并且在命令行将其clone下来 git clone ht ...

  5. CSS选择器,层叠

    CSS选择器 .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstname" ...

  6. List之去重

    废话不多说,直接上代码 List<int> list1 = new List<int>(); list1.Add(); list1.Add(); list1.Add(); li ...

  7. 使用threading模块创建线程

    #_author:来童星#date:2019/12/17#使用threading模块创建线程import threading,timedef process(): for i in range(3): ...

  8. JavaWeb学习篇之----Jsp详解

    今天我们来看一下Jsp的相关知识,首先来看看一下Jsp的相关定义: 简介: JSP全称是JavaServer Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术 ...

  9. 绘制窗体渐变背景的函数[delphi]

    绘制窗体渐变背景的函数,三个参数分别代表起始颜色,终止颜色,绘制方向procedure TForm1.Draw(StartColor:TColor;EndColor:TColor;Direction: ...

  10. inobounce.js : 禁止IOS H5的滑动回弹

    IOS的移动端/H5/webapp 页面如果滚动到底部或者在页面顶部再往上拉,都会出现一个回弹的效果. 想取消这个效果可以引入一个简单的库就行,不用再写繁琐的样式. github地址 直接引入就行 & ...