<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery對表格內容進行搜索篩選</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> table { border:0; } p { font:normal 12px/17px Arial; } td { font:normal 12px/17px Arial; padding:2px; width:100px; } th { font:bold 12px/17px Arial; text-align:left; padding:4px; border-bottom:1px solid #333; width:100px; } .even { background:#FFF38F; } /* 偶數行樣式*/ .odd { background:#FFFFEE; } /* 奇數行樣式*/ .selected { background:#FF6500; color:#fff; } </style> </head> <body> <p> <br> 篩選： <input id="filterName" name="filterName"> <span class="search">搜索</span> <br> </p> <table> <thead> <tr><th>姓名</th><th>性別</th><th>暫住地</th></tr> </thead> <tbody> <tr><td>SYJ</td><td>男</td><td>河北秦皇島市</td></tr> <tr><td>李四</td><td>女</td><td>北京北京市</td></tr> <tr><td>王五</td><td>男</td><td>河北秦皇島市</td></tr> <tr><td>趙六</td><td>男</td><td>河北唐山市</td></tr> <tr><td>張三</td><td>男</td><td>內蒙古呼和浩特市</td></tr> <tr><td>王六</td><td>女</td><td>內蒙古包頭市</td></tr> <tr><td>二狗</td><td>男</td><td>北京北京市</td></tr> <tr><td>李字</td><td>女</td><td>河北秦皇島市</td></tr> <tr><td>二蛋</td><td>男</td><td>東北遼寧省</td></tr> </tbody> </table> <script> $(function() { $('.search').on('click', function() { // console.log($('#filterName').val()); $('table tbody tr').hide() .filter(":contains('" + ($('#filterName').val()) + "')") .show(); }) }) </script> </body> </html>
效果展示：
