js实现前端动态筛选表格内容
代码参考:
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实现前端动态筛选表格内容的更多相关文章
- js如何实现动态在表格中添加标题和去掉标题?
js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...
- 纯JS实现前端动态分页码
思路分析:有3种情况 第一种情况,当前页面curPage < 4 第二种情况,当前页面curPage == 4 第三种情况,当前页面curPage>4 此外,还要考虑,当前页码 curPa ...
- node生成excel,动态替换表格内容
这里使用的是exceljs模块, 好上手,易操作 1. 大致使用步骤 npm install exceljs // 引用var Excel = require('exceljs'); // 创建一个w ...
- 向.net后端发送请求获取数据,在前端动态填充表格
实现效果 实现步骤 通过Ajax请求的方式 1.在前端定义Table 2.通过Ajax向.net后端发送数据请求 3.在.net后端定义方法供前端调用,并返回所需的数据 4.通过构造字符串的方式,将后 ...
- js如何实现动态克隆一个表格?
js如何实现动态克隆一个表格? 一.总结 1.通过innerHTML实现表格内容复制, 2.通过表格dom的属性(比如border)实现属性赋值, 3.通过表格dom的样式style实现样式的复制. ...
- JavaScript动态生成表格
要求: HTML标签只写一行表头 通过JS来写动态的表格(有多少组数据,就自动创建多少行表格) 为学习和演示,采用固定的数据,不涉及调用后台数据 代码实现: HTML内容: <table cel ...
- 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; ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- [HTML]js动态修改表格里面的内容
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...
随机推荐
- nginx 自启动
转载:https://www.cnblogs.com/cxscode/p/8262319.html 安装Nginx 下载windows版nginx (http://nginx.org/download ...
- [LOJ#2732] 「JOISC 2016 Day 2」雇佣计划
参考博文 (不过个人感觉我讲的稍微更清楚一点) 题目就是让我们求图中满足数值大于等于B的连通块数量 然后我们可以尝试转换为求连通块两端所产生的“谷”的数量,显然一个连通块对谷可以贡献2的答案,最终答案 ...
- 图(graph)
一.非线性结构:图 图由顶点集V,集合规模为n,在n个顶点之间可能存在对应关系,我们用连边来描述这种,即边E,规模为e. 邻接关系:顶点与顶点之间的关系:关联关系:顶点与它相连的边的关系.序列结构(v ...
- php漂亮的分页类
<?php /* * PHP分页类 * @package Page * @Created 2013-03-27 * @Modify 2013-03-27 * ...
- Java处理图片工具类
import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...
- JavaScript: 变量提升和函数提升
第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...
- protobuf3的学习笔记
学习protobuf的过程中踩了不少的坑,这篇博文算是一个小结吧! 环境: windows VisualStudio Google.Protobuf.Tools. Google.Protobuf. 其 ...
- 整理delphi及整理原则
回看delphi使用的人也不多,但一直觉得这门语言挺好的,所以一直在用,在很多方面也给了很多帮助和启示 加上delphi的学习文件也确实比较少,故收集起来也不容易.今日,重新整理一下delphi ,一 ...
- delphi Treeview用法
Treeview用于显示按照树形结构进行组织的数据. Treeview控件中一个树形图由节点(TreeNode)和连接线组成.TtreeNode是TTreeview的基本组成单元. ...
- hive中的lateral view 与 explode函数的使用
hive中的lateral view 与 explode函数的使用 背景介绍: explode与lateral view在关系型数据库中本身是不该出现的. 因为他的出现本身就是在操作不满足第一范式的数 ...