JavaScript前端页面搜索功能案例[基于jQuery]

本文说明了JavaScript前端页面搜索功能。分享给大家参考，如下：

今天给大家分享一个关于前端页面搜索的案例。在这种情况下，可以快速找到表数据，这比在浏览器中使用ctrl F要好。

渲染：

代码：

！doctype html lang=' en ' head meta charset=' utf-8 ' title page搜索示例/title script src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script style table { width :400 px；border:1px纯蓝；边界崩溃：崩溃；}表格th { height:30pxborder:1px纯蓝；文本对齐：中心；}表格td { height:30pxborder:1px纯蓝；文本对齐：中心；}/style/head dy table tr th name/th th th性别/th th电话/th/tr TD张三/td td男/td/td TD TD TD 13111112222/TD/tr TD李思/TD男/TD TD TD/TD TD TD TD TD/TD TD TD TD TD TD 132333334444/TD/tr TD tr TD移动充值/TD女/TD TD TD TD 10086/TD/tr tr TD联通充值/TD女/TD TD 10010/TD/tr/table div style=。高度：20px'/div div输入类型=' text ' name=' id=' ' input type=' button ' value=' search '/div/body script $(' input[type=button]')。click(function(){ var text=$(' input[type]$(' table tr '))。不是(' :first ')。隐藏()。过滤器(' : contains(' text ' ')')。show()；});/script/html代码相对简单。首先，给按钮按钮添加一个click事件，然后获取文本框中的内容，然后在表格中查找tr。首先，过滤掉标题中的tr，然后隐藏所有其他tr，然后根据内容进行过滤，并显示过滤后的行。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun来测试上述代码的运行效果。

注：此外，以下在线工具也有前端页面搜索功能，功能更强大：

Php在线函数参考表：http://tools.jb51.net/table/php_fun_table

中国少数民族分布在线查询工具：http://tools.jb51.net/bianmin/minzufenbu

世界节在线查询工具：http://tools.jb51.net/bianmin/jieri

世界各国区号和时差对照表：http://tools.jb51.net/bianmin/shicha

世界各国/地区货币查找表：http://tools.jb51.net/bianmin/huobi

世界首都查找表：http://tools.jb51.net/bianmin/shoudu

有关jQuery的更多信息，请参考本网站的主题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》和《jquery选择器用法总结》

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