本文通过一个实例告诉我们，JS实现了对表表中某一列的即时搜索和过滤功能。分享给大家参考，如下：

有时，我们从数据库中读取数据，并将其显示在表中。这时又有了新的需求，就是在搜索框中输入关键词，立即过滤表中的内容。

但是，立即触发数据库的查询然后回调显示会很慢，会拖累服务器，降低用户体验。这时候如果有纯js操作，表的某一列会被立即过滤掉，这样既提高了搜索速度，又不占用服务器资源，用户自然会满意。

实现如下，先看效果图，

开始状态：

在输入框中输入“e”，表格将立即被过滤。筛选表中的行包含“e”，但不会隐藏“e”。使用在线HTML/JS/css运行工具http://tools.jb51.net/code/HtmlJsRun,测试运行效果如下图所示：

实现代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www.jb51.net js搜索筛选器表列/title/head script type=' text/JavaScript '函数对search (obj) {//js函数启动setTimeout(function(){//因为是实时查询，所以需要通过setTimeout进行延迟，这样就可以将值写入输入，然后读取varstoreid=document . getelementbyid(' store ')；//获取表var row length=storeid . rows . length的id id//表中有多少行？var key=obj.value//获取输入框var searchCol=0的值；//要搜索哪一列，这里是第一列，从0开始计算为(var I=1；irowsLengthI ){//根据表中行数循环。在这个例子中，第一行是标题，所以i=1。从第二行开始筛选(从0开始计数)var searchtext=storeid.rows [I]。单元格[searchcol]。innerhtml//获取if (searchtext)值。使用match函数筛选表行{//的match (key))。如果输入的值，即变量key的值为空，则返回true，storeid . rows[I]. style . display=' '；//显示行操作。} else {storeid。行[i]。风格。显示='无'；//隐藏行操作}}，200)；//200是延迟时间}/scriptbodydiv输入名称=' key '类型=' text ' id=' key ' onkeydown=' on search(this)'值=''//div表格宽度=' 200 '边框=' 1' id=' store '！-id与函数的getId一致-tr bgcolor=' # cccccccc ' TD name/TD TD/TD/TD/tr TD good/TD TD TD TD/tr TD better/TD TD TD TD/TD TD/tr TD best/TD/TD/TD/TD TD TD TD/TD TD TD/tr TD/tr tdbad/TD/TD/TD TD TD/TD/tr tr tdbest/TD/TD/TD/TD/tr/table/body/Htmlmore对JavaScript感兴趣的读者

希望本文对JavaScript编程有所帮助。