代码参考:

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. 笔记56 Mybatis快速入门(七)

    相关概念介绍(二) 6.一级缓存 <1>在一个session里查询相同id的数据 package mybatis.annotation; import java.io.IOExceptio ...

  2. Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类,是否可以implements(实 现)interface(接口

    匿名的内部类是没有名字的内部类.不能extends(继承) 其它类,但一个内部类可以作为一个接口,由另一个内部类实现

  3. svg圆环缓冲动画

    代码如下 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8& ...

  4. leetcode-399-除法求值

    方法一:dfs+图 class Solution: def calcEquation(self, equations: List[List[str]], values: List[float], qu ...

  5. parseFloat 和 Number isNaN 转换

    parseFloat(true) // NaN Number( parseFloat(null) // NaN Number( parseFloat('') // NaN Number('') par ...

  6. Java——package和import关键字

    1.8 package和import关键字 1.8.1 package 包其实就是目录,特别是项目比较大,java 文件特别多的情况下,我们应该分目录管理,在java 中称为分包管理,包名称通常采用小 ...

  7. 后缀自动机模板——不同子串个数p2408

    后缀自动机的入门博客 https://www.luogu.org/blog/Kesdiael3/hou-zhui-zi-dong-ji-yang-xie 有两种求法,分别对应了两种性质 #includ ...

  8. 下面是一段delphi代码,你在c# 中引入api 即可

    procedure TForm1.Button1Click(Sender: TObject);var i:HWND; cs:CREATESTRUCT;begin// i := FindWindowEx ...

  9. bs4修改html文件和保存

    一.需求 将2个html文件保存到本地浏览器,例如: A页面(我的博客主页) B页面(爬虫四大金刚) 然后将A页面中的爬虫链接,链接的a标签中的href属性修改成本地B页面的地址,实现在本地浏览A页面 ...

  10. NX二次开发-创建经典工具栏UF_UI_create_toolbar

    NX9+VS2012 1.打开D:\Program Files\Siemens\NX 9.0\UGII\menus\ug_main.men 找到装配和PMI,在中间加上一段 TOGGLE_BUTTON ...