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

更新：2021-02-08 10:42:39

人气：1545

来源：互联网转载

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>

转载请注明：jQuery实现页面中表格数据的搜索 | 李雷博客 - PHP博客

推荐的文章

一封来自谷歌的信“您需要先修正一些问题，您的帐号才能获批”

如何批量下载CSS文件中相对路径的图片

php中htmlspecialchars()函数和addslashes()函数的使用和区别

12306验证码被拍砖：你其实不了解他们有多拼！

# 发表我的评论

/ /

# 最近评论

暂时还没有评论，要不要说点什么？

Ads by Google

随手记

PHP经验分享

联系博主

Hello，本博客系统采用PHP和MySql开发，程序开发完全是因为个人爱好，是自己纯手写PHP源代码，未采用任何PHP框架！

QQ：858353007 微信号：lileihot123

标签：PHP技术博客 PHP经验分享

网站地图 XML地图随手记本站声明博客移动版	会员服务 PHP经验分享帮助中心	关于我们联系我们获取积分 QQ：858353007	广告服务广告优势付款方式 mdaima@126.com	加我微信	移动端访问


Copyright © 2014- 2025 www.mdaima.com All Rights Reserved. 李雷博客，专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客！ ICP备案号：京ICP备10202169号-4