基于jQuery實(shí)現(xiàn)頁(yè)面搜索功能
jQuery實(shí)現(xiàn)頁(yè)面搜索,搜索篩選用戶輸入的內(nèi)容!
HTML:
<div class="table"> <table> <tr id="theader"> <th>姓名</th> <th>性別</th> <th>聯(lián)系方式</th> </tr> <tr> <td>客服</td> <td>女</td> <td>161654466</td> </tr> <tr> <td>掌柜</td> <td>男</td> <td>37398378737</td> </tr> <tr> <td>小二</td> <td>男</td> <td>37398378737</td> </tr> <tr> <td>小三</td> <td>女</td> <td>3464653537</td> </tr> <tr> <td>小四</td> <td>女</td> <td>37398378737</td> </tr> </table> <input type="text"></input> <input type="button" value="搜索"></input> </div>
JQ:
$(function(){ $("input[type=button]").click(function(){ var txt=$("input[type=text]").val(); if($.trim(txt)!=""){ $("table tr:not('#theader')").hide().filter(":contains('"+txt+"')").show().css("background","red"); }else{ $("table tr:not('#theader')").css("background","#fff").show(); } }); })
更多搜索功能實(shí)現(xiàn)的精彩文章,請(qǐng)點(diǎn)擊專題:javascript搜索功能匯總 進(jìn)行學(xué)習(xí)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JQuery+JS實(shí)現(xiàn)仿百度搜索結(jié)果中關(guān)鍵字變色效果
- jquery+json實(shí)現(xiàn)的搜索加分頁(yè)效果
- 基于jquery的頁(yè)面劃詞搜索JS
- jquery中用jsonp實(shí)現(xiàn)搜索框功能
- jQuery Jsonp跨域模擬搜索引擎
- jquery 表格排序、實(shí)時(shí)搜索表格內(nèi)容(附圖)
- jQuery插件select2利用ajax高效查詢大數(shù)據(jù)列表(可搜索、可分頁(yè))
- jQuery UI仿淘寶搜索下拉列表功能
- jQuery下拉美化搜索表單效果代碼分享
- jQuery實(shí)現(xiàn)搜索頁(yè)面關(guān)鍵字的功能
- JavaScript前端頁(yè)面搜索功能案例【基于jQuery】
相關(guān)文章
用JQuery 實(shí)現(xiàn)的自定義對(duì)話框
用JQuery 實(shí)現(xiàn)的自定義對(duì)話框...2007-03-03jQuery實(shí)現(xiàn)radio第一次點(diǎn)擊選中第二次點(diǎn)擊取消功能
本篇文章主要介紹了jQuery實(shí)現(xiàn)radio第一次點(diǎn)擊選中第二次點(diǎn)擊取消功能的相關(guān)知識(shí),具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05關(guān)于webuploader插件使用過(guò)程遇到的小問(wèn)題
這篇文章主要為大家詳細(xì)解決了關(guān)于webuploader插件使用過(guò)程遇到的小問(wèn)題,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11兩種方法基于jQuery實(shí)現(xiàn)IE瀏覽器兼容placeholder效果
這篇文章主要介紹了兩種方法基于jQuery實(shí)現(xiàn)IE瀏覽器兼容placeholder效果,需要的朋友可以參考下2014-10-10

使用ajaxfileupload.js實(shí)現(xiàn)上傳文件功能

jquery.lazyload 實(shí)現(xiàn)圖片延遲加載jquery插件