jQuery_review之对已经加载到页面上的的table进行内容的筛选
浏览数：19 /
时间：2015年06月09日
后台将数据通过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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
