jquery 页面搜索例子

最新推荐文章于 2022-11-09 13:24:36 发布

编程之上

最新推荐文章于 2022-11-09 13:24:36 发布

阅读量1.1k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/ruizhengyun/article/details/45027657

版权

jquery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>页面搜索实例</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
	table{border-collapse:collapse;}
	table td,table th{ border:1px solid #ddd; line-height: 30px; padding: 0 0 0 10px;}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table">
	<tr class="thead">
		<th>姓名</th>
		<th>性别</th>
		<th>职位</th>
		<th>手机号码</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>男</td>
		<td>前端开发</td>
		<td>13432349833</td>
	</tr>
	<tr>
		<td>张歆艺</td>
		<td>女</td>
		<td>PHP</td>
		<td>15943433443</td>
	</tr>
	<tr>
		<td>赵毅</td>
		<td>男</td>
		<td>PHP</td>
		<td>13423783334</td>
	</tr>
	<tr>
		<td>赵克琴</td>
		<td>女</td>
		<td>前端开发</td>
		<td>13743983849</td>
	</tr>
</table>
<input type="text" name="" id="">
<input type="button" value="搜索">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
	$(function(){
		$('input[type=button]').click(function(){
			var $td = $("#table tr:not('.thead')");
			var text = $('input[type=text]').val();
			if($.trim(text) !==""){
				$td.hide().filter(':contains("'+ text + '")').show();
			}
		});
	});
</script>
</body>
</html>

编程之上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 页面搜索例子

页面搜索实例 table{border-collapse:collapse;} table td,table th{ border:1px solid #ddd; line-height: 30px; padding: 0 0 0 10px;} 姓名性别职位手机号码张三男前端开发 13432349833 张歆艺
复制链接

扫一扫