<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="scripts/jquery.min.js"></script> </head> <style> table,tr,td{ border:solid 1px; border-collapse:collapse; text-align:center; } </style> <body> 筛选：<input id="filter" type="text"> <table> <thead> <tr> <td>姓名</td> <td>性别</td> <td>暂住地</td> </tr> </thead> <tbody> <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr> <tr class="child_row_01"><td>张三</td><td>男</td><td>浙江宁波</td></tr> <tr class="child_row_01"><td>三</td><td>男</td><td>浙江宁波</td></tr> <tr class="parent" id="row_02"><td colspan="3">后端开发组</td></tr> <tr class="child_row_02"><td>张三</td><td>男</td><td>宁波</td></tr> <tr class="child_row_02"><td>三</td><td>男</td><td>浙江宁波</td></tr> <tr class="parent" id="row_03"><td colspan="3">美工组</td></tr> <tr class="child_row_03"><td>张</td><td>男</td><td>浙江</td></tr> <tr class="child_row_03"><td>三</td><td>男</td><td>浙江宁波</td></tr> </tbody> </table> </body> <script type="text/javascript"> $(function(){ $('#filter').keyup(function(){ $('table tbody tr').hide() .filter(":contains('"+($(this).val())+"')").show(); }); }); </script> </html>