jQuery表格内容筛选

最新推荐文章于 2023-10-13 11:16:05 发布

依然泛特西

最新推荐文章于 2023-10-13 11:16:05 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_39823527/article/details/78721881

版权

学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script src="scripts/jquery.min.js"></script>
	</head>
	<style>
		table,tr,td{
			border:solid 1px;
			border-collapse:collapse;
			text-align:center;
		}
	</style>
	
	<body>
				筛选：<input id="filter" type="text">
		<table>
			<thead>
				<tr>
					<td>姓名</td>
					<td>性别</td>
					<td>暂住地</td>
				</tr>
			</thead>
			<tbody>
				<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
				<tr class="child_row_01"><td>张三</td><td>男</td><td>浙江宁波</td></tr>
				<tr class="child_row_01"><td>三</td><td>男</td><td>浙江宁波</td></tr>
				
				<tr class="parent" id="row_02"><td colspan="3">后端开发组</td></tr>
				<tr class="child_row_02"><td>张三</td><td>男</td><td>宁波</td></tr>
				<tr class="child_row_02"><td>三</td><td>男</td><td>浙江宁波</td></tr>
				
				<tr class="parent" id="row_03"><td colspan="3">美工组</td></tr>
				<tr class="child_row_03"><td>张</td><td>男</td><td>浙江</td></tr>
				<tr class="child_row_03"><td>三</td><td>男</td><td>浙江宁波</td></tr>
			</tbody>
		</table>
	</body>
	<script type="text/javascript">
		$(function(){
			$('#filter').keyup(function(){
				$('table tbody tr').hide()
					.filter(":contains('"+($(this).val())+"')").show();
			});
		});
	</script>
</html>

依然泛特西

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery表格内容筛选

Insert title here table,tr,td{ border:solid 1px; border-collapse:collapse; text-align:center; } 筛选：姓名性别暂住地前台设计组张三男浙江宁
复制链接

扫一扫

专栏目录