基于jQuery實現(xiàn)頁面搜索功能

更新時間：2020年03月26日 17:05:03 作者：macanfa

這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)頁面搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

jQuery實現(xiàn)頁面搜索，搜索篩選用戶輸入的內(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();
   }
  });
 })

更多搜索功能實現(xiàn)的精彩文章，請點擊專題：javascript搜索功能匯總進行學習

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery插件tytabs.jquery.min.js實現(xiàn)漸變TAB選項卡效果
這篇文章主要介紹了jquery插件tytabs.jquery.min.js實現(xiàn)漸變TAB選項卡效果,實例分析了tytabs.jquery.min.js插件實現(xiàn)tab選項卡切換效果的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
JavaScript與JQUERY獲取元素的寬、高和位置
文章給大家匯總整理了JavaScript以及jQuery獲取元素高寬和位置等信息的方法，非常的全面，小伙伴們可以記錄下以便查看
2017-02-02
jQuery獲取URL請求參數(shù)的方法
這篇文章主要介紹了jQuery獲取URL請求參數(shù)的方法,涉及jquery針對URL的獲取與字符串的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
jQuery中next()方法用法實例
這篇文章主要介紹了jQuery中next()方法用法,實例分析了next()方法的功能、定義及獲得匹配元素集合中每個元素緊鄰的同輩元素使用技巧,需要的朋友可以參考下
2015-01-01
jquery二級導航內(nèi)容均分的原理及實現(xiàn)
頭部導航二級導航有些內(nèi)容太長，一列的話太過難看，就要分成兩列，要做到按塊盡量均分，排列順序沒有限制
2013-08-08
$.extend 的一個小問題
本文給大家記錄的是個人在使用$.extend 的時候遇到的一個小問題，以及原因分析和解決方案，十分的實用，有需要的小伙伴可以參考下。
2015-06-06
jQuery學習筆記操作jQuery對象 CSS處理
在對class屬性的操作中，實際上已經(jīng)改變元素樣式了，但這些都是根據(jù)已設(shè)定的CSS規(guī)則間接生效的。因此我們有必要使用更為直接的方式來改變原先設(shè)定好了的CSS規(guī)則
2012-09-09
jQuery學習筆記之jQuery+CSS3的瀏覽器兼容性
這篇文章主要介紹了jQuery學習筆記之jQuery+CSS3的瀏覽器兼容性的相關(guān)資料,需要的朋友可以參考下
2015-01-01
Jquery幻燈片特效代碼分享打開頁面隨機選擇切換方式（3）
jQuery是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，一個漂亮的幻燈片更能吸引訪客的注意力。本文實例講述了jQuery實現(xiàn)時尚漂亮的幻燈片特效，基本能滿足你在網(wǎng)頁上使用幻燈片(焦點圖)效果。分享給大家供大家參考。具體如下：
2015-08-08
jQuery實現(xiàn)動態(tài)加載瀑布流
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)動態(tài)加載瀑布流，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09