<div class="codetitle"> <span><a style="CURSOR: pointer" data="61495" class="copybut" id="copybut61495" onclick="doCopy('code61495')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code61495"> <br>[html]<br> <br> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br><title>JQuery表格内容过滤</title> <br><style type="text/css"> <BR>table{ border:0;border-collapse:collapse;} <BR>div{font:normal 12px/17px Arial;} <BR>td{ font:normal 12px/17px Arial;padding:2px;width:100px;} <BR>th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;} <BR>.even{ background:#FFF38F;} /* 偶数行样式*/ <BR>.odd{ background:#FFFFEE;} /* 奇数行样式*/ <BR>.selected{ background:#FF6500;color:#fff;} <BR></style> <br><!-- 引入jQuery --> <br><script src="jquery-1.5.2.min.js" type="text/javascript"></script> <br><script type="text/javascript"> <BR> $(function(){ <BR> $("#filterName").keyup(function(){ <BR> $("table tbody tr") <BR> .hide() <BR> .filter(":contains('"+( $(this).val() )+"')") <BR> .show(); <BR> }).keyup(); <BR> }) <BR></script> <br> <br> <br> <div> <br> 筛选: <input id="filterName" name="filterName"> <br> </div> <br> <table> <br> <thead> <br> <tr> <th>姓名</th> <th>性别</th> <th>暂住地</th> </tr> <br> </thead> <br> <tbody> <br> <tr> <td>SYJ</td> <td>男</td> <td>河北秦皇岛市</td> </tr> <br> <tr> <td>李四</td> <td>女</td> <td>北京北京市</td> </tr> <br> <tr> <td>王五</td> <td>男</td> <td>河北秦皇岛市</td> </tr> <br> <tr> <td>赵六</td> <td>男</td> <td>河北唐山市</td> </tr> <br> <tr> <td>张三</td> <td>男</td> <td>内蒙古呼和浩特市</td> </tr> <br> <tr> <td>王六</td> <td>女</td> <td>内蒙古包头市</td> </tr> <br> <tr> <td>二狗</td> <td>男</td> <td>北京北京市</td> </tr> <br> <tr> <td>李字</td> <td>女</td> <td>河北秦皇岛市</td> </tr> <br> <tr> <td>二蛋</td> <td>男</td> <td>东北辽宁省</td> </tr> <br> </tbody> <br> </table> <br> <br> <br> </div>