html table 筛选记录,JS实现table表格内针对某列内容进行即时搜索筛选功能

JS实现table表格内针对某列内容进行即时搜索筛选功能

发布时间：2020-08-29 09:26:37

来源：脚本之家

阅读：103

作者：Marx-link

本文实例讲述了JS实现table表格内针对某列内容进行即时搜索筛选功能。分享给大家供大家参考，具体如下：

往往有些时候，我们把数据从数据库读取出来，显示到table里面，而此时来了个新需求，要在一个搜索框内输入关键字，表格的内容进行即时的筛选。

而即时触发进行数据库的查询，再回调显示，就显得慢，拖累服务器，降低用户体验度，这时，要是有个纯js操作，进行表格某列的即时筛选，这样既能提高搜索速度，也不用占用服务器资源，用户自然也满意。

实现如下，先看效果图，

开始状态：

在输入框内输入‘e'，表格即时进行筛选，筛选表格内包含有‘e'的行，没有‘e'的进行隐藏，使用在线HTML/JS/css运行工具http://tools.jb51.net/code/HtmlJsRun，测试运行效果如下图所示：

实现代码：

www.jb51.net JS搜索筛选table列

function onSearch(obj){//js函数开始

setTimeout(function(){//因为是即时查询，需要用setTimeout进行延迟，让值写入到input内，再读取

var storeId = document.getElementById('store');//获取table的id标识

var rowsLength = storeId.rows.length;//表格总共有多少行

var key = obj.value;//获取输入框的值

var searchCol = 0;//要搜索的哪一列，这里是第一列，从0开始数起

for(var i=1;i

var searchText = storeId.rows[i].cells[searchCol].innerHTML;//取得table行，列的值

if(searchText.match(key)){//用match函数进行筛选，如果input的值，即变量 key的值为空，返回的是ture，

storeId.rows[i].style.display='';//显示行操作，

}else{

storeId.rows[i].style.display='none';//隐藏行操作

}

},200);//200为延时时间

}

name
better
best
bad
worse
worst

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

html table 筛选记录,JS实现table表格内针对某列内容进行即时搜索筛选功能相关推荐

php搜索表格,table表格内对某列内容进行搜索筛选步骤详解
这次给大家带来table表格内对某列内容进行搜索筛选步骤详解,table表格内对某列内容进行搜索筛选的注意事项有哪些,下面就是实战案例,一起来看一下. 往往有些时候,我们把数据从数据库读取出来,显示到 ...
【写博客常用】latex表格详细教程（table, tabular, multirow, multicolumn）latex表格内如何自动换行
[写博客常用]latex表格详细教程(table, tabular, multirow, multicolumn)&latex表格内如何自动换行看本文先看,本文是基于此篇做表格方法上加了换行 ...
html中两列合并,表格怎么把两列内容合并到一起
1. 怎么将EXCEL表格中两列的内容合并成一列而内容不变将EXCEL表格中两列的内容合并成一列而内容不变,可以使用合并功能函数"&"实现. 方法步骤如下: 1.打开需要 ...
html里table的遍历,js遍历table中的tr
js遍历table中的tr function tt(){ var table1=document.getElementById('table1'); //节点只支持getElementsByTagNa ...
js遍历获取表格内数据方法
分享一下我老师大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow 本文将介绍如何使用 ...
js中在表格中增加一列的方法_Excel表格中需要提取一列内容末尾的数字，同事分分钟完成...
[温馨提示]亲爱的朋友,阅读之前请您点击[关注],您的支持将是我最大的动力! 日常工作中,经常会收到老板发来的不规则表格,是表格内容不规则: 如下图,让把数字单独一列,以便进行汇总计算. 方法一:快捷 ...
怎么计算另一个表格内某几列的和_Excel 函数(一) – 用 evaluate 函数自动计算
以前写过不少函数,但都是以实际案例操作的形式写,标题上没有专门开个组别.随着问的人增多,发现有必要给函数的使用开个新的组别,便于网友查找. 在某几列中输入数值后,要在指定列中自动显示所需的计算结果(假 ...
如何将Excel表格中的多列内容合并到一列
目录方法一:对于数据量不大的情况,可以考虑如下方法: 方法二:当数据量过大或存在多张需要填充的表格时方法一:对于数据量不大的情况,可以考虑如下方法: 步骤一:在第一列的最下方一个单 ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

html table 筛选记录,JS实现table表格内针对某列内容进行即时搜索筛选功能

html table 筛选记录,JS实现table表格内针对某列内容进行即时搜索筛选功能相关推荐

最新文章

热门文章