表格内容的筛选

最新推荐文章于 2022-02-23 17:34:42 发布

张悦是个好人

最新推荐文章于 2022-02-23 17:34:42 发布

阅读量135

点赞数

本文链接：https://blog.csdn.net/qq_45337854/article/details/103226304

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格内容的筛选</title>
		<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
	</head>
	<body>
		
		<table width="260" border="1" align="center">
		  <thead align="center" valign="bottom">
			  <tr>
				  <td colspan="2">搜索：<input type="text" name="keyword" id="keyword"/></td>
			  </tr>
			  <tr bgcolor="#00FFFF">
				  <td>姓名</td>
				  <td>成绩</td>
			  </tr>
		  </thead>
		  <tbody align="center" bgcolor="#FFFF00">
			  <tr>
				  <td>张悦</td>
				  <td>100</td>
			  </tr>
			  <tr>
				  <td>王帅</td>
				  <td>97</td>
			  </tr>
			  <tr>
				  <td>李雷</td>
				  <td>91</td>
			  </tr>
			  <tr>
				  <td>高天</td>
				  <td>97</td>
			  </tr>
			  <tr>
				  <td>赵卫</td>
				  <td>84</td>
			  </tr>
			  <tr>
				  <td>王强</td>
				  <td>97</td>
			  </tr>
			  <tr>
				  <td>陈美</td>
				  <td>88</td>
			  </tr>
		  </tbody>
		</table>
		<script>
			$(function(){
				$("#keyword").keyup(function(){
				if($("keyword").val()!=''){
					$("table tbody tr").hide().filter(":contains('"+($(this).val())+"')").show();
				}
			})
			})
		</script>
	</body>
</html>

张悦是个好人

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表格内容的筛选</title> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> ...
复制链接

扫一扫