第二,需要记住的就是处理空行,如果当前用户已经将所有的内容清空掉,则要处理空行,来保证当前功能是正确的。第三个,就是使用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>
jQuery_review之对已经加载到页面上的的table进行内容的筛选
原文:http://blog.csdn.net/ziwen00/article/details/38148027