代码参考:

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. nginx 自启动

    转载:https://www.cnblogs.com/cxscode/p/8262319.html 安装Nginx 下载windows版nginx (http://nginx.org/download ...

  2. [LOJ#2732] 「JOISC 2016 Day 2」雇佣计划

    参考博文 (不过个人感觉我讲的稍微更清楚一点) 题目就是让我们求图中满足数值大于等于B的连通块数量 然后我们可以尝试转换为求连通块两端所产生的“谷”的数量,显然一个连通块对谷可以贡献2的答案,最终答案 ...

  3. 图(graph)

    一.非线性结构:图 图由顶点集V,集合规模为n,在n个顶点之间可能存在对应关系,我们用连边来描述这种,即边E,规模为e. 邻接关系:顶点与顶点之间的关系:关联关系:顶点与它相连的边的关系.序列结构(v ...

  4. php漂亮的分页类

    <?php    /*    * PHP分页类    * @package Page    * @Created 2013-03-27    * @Modify  2013-03-27    * ...

  5. Java处理图片工具类

    import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...

  6. JavaScript: 变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  7. protobuf3的学习笔记

    学习protobuf的过程中踩了不少的坑,这篇博文算是一个小结吧! 环境: windows VisualStudio Google.Protobuf.Tools. Google.Protobuf. 其 ...

  8. 整理delphi及整理原则

    回看delphi使用的人也不多,但一直觉得这门语言挺好的,所以一直在用,在很多方面也给了很多帮助和启示 加上delphi的学习文件也确实比较少,故收集起来也不容易.今日,重新整理一下delphi ,一 ...

  9. delphi Treeview用法

    Treeview用于显示按照树形结构进行组织的数据.         Treeview控件中一个树形图由节点(TreeNode)和连接线组成.TtreeNode是TTreeview的基本组成单元.   ...

  10. hive中的lateral view 与 explode函数的使用

    hive中的lateral view 与 explode函数的使用 背景介绍: explode与lateral view在关系型数据库中本身是不该出现的. 因为他的出现本身就是在操作不满足第一范式的数 ...