搜索指定网站内容( 2018年05月11日12:02：02:07)

　　搜索指定网站内容(

2018年05月11日12:02：02:07)

　　JS实现了对表中一列内容的实时搜索和过滤功能

　　更新时间：2018年5月11日12:02:07作者：Marx link

　　本文文章主要介绍JS如何实现对表中一列内容的实时搜索和过滤功能，涉及到HTML元素的JavaScript遍历和属性的动态修改。有需要的朋友可以参考

　　本文描述了JS如何实现对表中一列内容的实时搜索和过滤功能。与您分享，供您参考，如下所示：

　　有时，我们从数据库中读取数据并将其显示在表中。此时，新的需求是在搜索框中输入关键字并实时过滤表的内容

　　当数据库的查询立即触发并调用显示时，速度会变慢，拖慢服务器，减少用户体验。此时，如果有一个纯JS操作实时过滤表中的一列，不仅可以提高搜索速度，而且不占用服务器资源，用户自然满意

　　具体实施如下。首先看一下渲染

　　启动状态：

　　在输入框中输入“e”，表格将立即被过滤。如果没有“e”，则筛选表中收录“e”的行将被隐藏。使用在线HTML/JS/CSS运行工具，测试运行效果如下图所示：

　　实施代码：

<p>

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