实现对表格内容的简单筛选

最新推荐文章于 2024-07-26 20:46:33 发布

weixin_34221773

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量196

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/GracefulTing/blog/1630298

版权

2019独角兽企业重金招聘Python工程师标准>>>

以下是一个简单的筛选功能实现，使用jquery对表格内容进行筛选。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格筛选</title>
	<style>
		table {
		  	width: 50%;
		  	border: 1px solid;
		}
		tr th {
		  	border-bottom: 1px solid;
		}
		tr td{
			text-align: center;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>出生地</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>北京</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>上海</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>天津</td>
			</tr>
			<tr>
				<td>4</td>
				<td>赵柳</td>
				<td>厦门</td>
			</tr>
			<tr>
				<td>5</td>
				<td>王莉莉</td>
				<td>广州</td>
			</tr>
			<tr>
				<td>6</td>
				<td>柳旺</td>
				<td>天津</td>
			</tr>
			<tr>
				<td>7</td>
				<td>张wu</td>
				<td>北京</td>
			</tr>
			<tr>
				<td>8</td>
				<td>莉儿</td>
				<td>上海</td>
			</tr>
			<tr>
				<td>9</td>
				<td>王欣欣</td>
				<td>天津</td>
			</tr>
			<tr>
				<td>10</td>
				<td>李敏</td>
				<td>厦门</td>
			</tr>
			<tr>
				<td>11</td>
				<td>许莉莉</td>
				<td>广州</td>
			</tr>
			<tr>
				<td>12</td>
				<td>贾晶</td>
				<td>天津</td>
			</tr>
		</tbody>
	</table>
	筛选条件:<input type="text" id="filterCon">
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
	$("#filterCon").keyup(function(){
		$("table tbody tr").hide().filter(":contains('" + ($(this).val()) + "')").show();
	}).keyup();  //DOM加载完时，绑定事件完成之后立即触发
</script>
</html>

效果:

1.界面展示：