廢話不多說了，直接給大家貼關鍵代碼了。具體代碼如下所示：
<html> <head> <title>表格內容的篩選</title> <link type="text/css" rel="stylesheet" href="css/contains.css" /> <style type="text/css">table { width: 50%; border: 1px solid; background-color: #8FBC8F;}thead tr th { text-align: left; border-bottom: 1px solid;}</style> <script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script> <script type="text/javascript"> $(function() { $('#filterName').keyup(function(){ $('table tbody tr').hide() .filter(":contains('" +($(this).val()) + "')").show(); }).keyup();//DOM加載完時，綁定事件完成之后立即觸發 }); </script> </head> <body> 篩選<input type="text" id="filterName"/> <table> <thead> <tr><th>姓名</th><th>性別</th><th>暫住地</th></tr> </thead> <tbody> <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>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr><td>MAXMAN</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>Rick</td><td>男</td><td>浙江杭州</td></tr> <tr><td>Micle</td><td>女</td><td>浙江杭州</td></tr> </tbody> </table> </body></html>效果圖：
輸入前：
輸入后：
以上所述是小編給大家介紹的基于jQuery實現表格內容的篩選功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
