基于jQuery实现页面搜索功能

亦凉 2022-05-09 12:48 245阅读 0赞

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();
          }
        });
      })

发表评论取消回复

表情：

评论列表（有 0 条评论，245人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue实现仿音乐播放器14-实现搜索页面以及功能

效果 ![Image 1][]![20181213220319256.gif][] 实现百度音乐搜索API说明例：method=baidu.ting.s

古城微笑少年丶/ 2023年10月18日 12:38/ 0 赞/ 37 阅读

相关 jquery实现回车键登录/搜索等确认功能

button按钮提交方式： ![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg

你的名字/ 2023年02月14日 10:22/ 0 赞/ 20 阅读

相关 web页面之搜索、高级搜索功能

功能概述 web页面开发中，常见根据输入关键字搜索查询信息，如淘宝网、百度等的搜索，同时还附有包含多输入域条件的高级查询，这样的页面效果很常见。下面介绍一

ゝ一纸荒年。/ 2022年09月17日 15:13/ 0 赞/ 290 阅读

相关 jQuery Ajax实现简单的搜索框提示功能

html： <DOCTTYPE!> <html lang="en-us"> <head> <meta charset='utf-8'>

Myth丶恋晨/ 2022年07月14日 03:38/ 0 赞/ 243 阅读

相关基于jQuery实现页面搜索功能

HTML: <div class="table"> <table> <tr id="theader"> <th

亦凉/ 2022年05月09日 12:48/ 0 赞/ 246 阅读

相关 JQuery实现返回页面功能

写在正文之前的话：通常项目页面内容比较多的话，当用户拖动滚动条连续浏览后，想返回页面顶部，这时候一键返回功能就显得格外方便。效果图： ![20190122164738

浅浅的花香味﹌/ 2022年03月24日 18:44/ 0 赞/ 549 阅读

相关 HTML5 JQuery 实现搜索匹配功能

HTML5 JQuery 实现搜索匹配功能效果动态图： ![在这里插入图片描述][20190406220637574.gif] 源代码： all.html

浅浅的花香味﹌/ 2022年02月22日 20:44/ 0 赞/ 337 阅读

相关基于servlet的页面登录功能的实现

今日内容： 1. Servlet 2. HTTP协议 3. Request Servlet： 1. 概念 2. 步骤

今天药忘吃喽~/ 2022年01月28日 00:57/ 0 赞/ 231 阅读

相关 vue实现搜索功能

> 前言：最近小编也是刚跳槽新的公司一个月，前端技术栈是vue+element也是市面上比较常用的框架之一了，同时也花费一点时间总结一下最近的坑，react转vue的一个过程确

Love The Way You Lie/ 2022年01月22日 06:01/ 0 赞/ 407 阅读

相关实现搜索功能

1.准备视图函数search() 2.修改base.html 中搜索输入框所在的 1. <form action="\{ \{ url\_for('search') \}

墨蓝/ 2021年12月20日 11:39/ 0 赞/ 452 阅读