基于jQuery实现页面搜索功能

  • Z时代
  • 2024-01-10
  • 分类：综合

jQuery实现页面搜索，搜索筛选用户输入的内容！

HTML:

<div class="table">
  <table>
   <tr id="theader">
   <th>姓名</th>
   <th>性别</th>
   <th>联系方式</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();
   }
  });
 })

更多搜索功能实现的精彩文章，请点击专题：javascript搜索功能汇总 进行学习

以上是 基于jQuery实现页面搜索功能 的全部内容， 来源链接： utcz.com/z/329961.html

回到顶部