jQuery_review之对已经加载到页面上的的table进行内容的筛选

最新推荐文章于 2019-05-30 11:12:00 发布

陈字文

最新推荐文章于 2019-05-30 11:12:00 发布

阅读量2.1k

点赞数

分类专栏： JavaScript相关

本文链接：https://blog.csdn.net/ziwen00/article/details/38148027

版权

JavaScript相关专栏收录该内容

28 篇文章 0 订阅

订阅专栏

后台将数据通过response，经过HTML的解析之后，传递到前台进行展示，数据可能非常多。因此有一个在当前页面上进行二次搜索的功能是非常有必要的，要做找个功能对jQuery也是手到擒来的事情。仅仅是有几个小的知识点需要重点关注一下。第一个，使用什么事件呢？当然，我们可以再input搜索框后面增加一个检索按钮。但是这样用户就要多点一次按钮，甚至多点好几次按钮。在于服务器交互的时候，这种方式可以极大的减轻服务器的压力，但是在当前页面上，仅仅是通过input进行搜索的话，因为操作是在用户的浏览器上进行的，因此可以使用keyup事件，类似于google的搜索提示一样，做到比较好的用户体验效果。

第二，需要记住的就是处理空行，如果当前用户已经将所有的内容清空掉，则要处理空行，来保证当前功能是正确的。第三个，就是使用keyup的时候，应该要手动触发一次，防止出现意外的结果（DOM解析问题）。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript" src="jquery-1.8.3.js"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
  		$("#searchTrigger").keyup(function(){
  			var searchStr = $("#searchTrigger").val();
  			if(searchStr!=""){
	  			$("tbody>tr").hide().filter(":contains('"+searchStr+"')").show();
  			}else{
  				$("tbody>tr").show();
  			}
  		}).keyup();
  	})
  </script>
  <style type="text/css">
  	table{
  		text-align:center;
  		width:400px;
  		height:100px;
  		border:solid #000 1px;
  	}
  	thead tr td{
  		border-bottom:solid #000 1px;
  	}
  	td.heighLight{
  		background-color:#E49B1A;
  	}
  	tr.cata{
  		text-align:left;
  		background-color:grey;
  	}
  </style>
  </head>
  <body>
  	<label for="searchCondition">search condition:</label>
  	<input type="text" id="searchTrigger">
  	<table>
  		<thead>
  			<tr><td>fruit</td><td>price</td><td>date</td></tr>
  		</thead>
  		<tbody>
  			<tr><td>orange</td><td>$10.00</td><td>2013-01-12</td></tr>
  			<tr><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr>
  			<tr><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr>
  			<tr><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr>
  			<tr><td>eggplant</td><td>$7.00</td><td>2013-05-12</td></tr>
  			<tr><td>orange</td><td>$10.00</td><td>2013-01-12</td></tr>
  			<tr><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr>
  			<tr><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr>
  			<tr><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr>
  			<tr><td>eggplant</td><td>$7.00</td><td>2013-05-12</td></tr>
  		</tbody>
  	</table>
  </body>
</html>

陈字文

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery_review之对已经加载到页面上的的table进行内容的筛选

后台将数据通过response，经过HTML的解析之后，传递到前台进行展示，数据可能非常多。因此有一个在当前页面上进行二次搜索的功能是非常有必要的，要做找个功能对jQuery也是手到擒来的事情。仅仅是有几个小的知识点需要重点关注一下。第一个，使用什么事件呢？当然，我们可以再input搜索框后面增加一个检索按钮。但是这样用户就要多点一次按钮，甚至多点好几次按钮。在于服务器交互的时候，这种方式可以极大
复制链接

扫一扫