jQuery实现页面中表格数据的搜索
jQuery页面搜索一个表格,将搜索到的行保存,其余行隐藏。
HTML代码:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jQuery实现页面表格数据的搜索</title> <script src="js/jquery.min.js"> </script> <script> $(function() { $("#search").click(function() { var txt = $("#searchName").val(); if ($.trim(txt) != "") { $("table tr:not('#theader')").hide(); $("table tr:not('#theader')").filter(":contains('" + txt + "')").show(); } else { $("table tr:not('#theader')").show(); } }); }) </script> </head> <body> <div class="table"> <table> <tr id="theader"> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>女</td> <td>16</td> </tr> <tr> <td>李四</td> <td>男</td> <td>25</td> </tr> <tr> <td>王五</td> <td>男</td> <td>36</td> </tr> <tr> <td>孙七</td> <td>女</td> <td>45</td> </tr> <tr> <td>赵八</td> <td>女</td> <td>34</td> </tr> </table> <input type="text" id="searchName"/> <input type="button" value="搜索" id="search"/> </div> </body></html>
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码