欢迎您来到,李雷博客 | PHP博客        登录  |  注册

jQuery实现页面中表格数据的搜索

更新:2021-02-08 10:42:39
人气:1310
来源:互联网转载
A+

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>
推荐的文章
# 发表我的评论
  /     /  
# 最近评论
暂时还没有评论,要不要说点什么?
  Ads by Google
  联系博主
Hello,本博客系统采用PHP和MySql开发,程序开发完全是因为个人爱好,是自己纯手写PHP源代码,未采用任何PHP框架!
QQ:858353007   微信号:lileihot123
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
加我微信
移动端访问
 
 
Copyright © 2014- 2024 www.mdaima.com All Rights Reserved.
李雷博客,专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客!   ICP备案号:京ICP备10202169号-4