1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title></title> 4 <style type="text/css"> 5 table 6 { 7 width: 300px; 8 } 9 10 table, thead 11 { 12 border: 1px solid black; 13 border-collapse: collapse; 14 } 15 16 .parent 17 { 18 background: lightgreen; 19 } 20 21 .selected 22 { 23 background: #fff38f; 24 } 25 </style> 26 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 27 <script type="text/javascript"> 28 $(function () { 29 $("#filterName").keyup(function () { 30 $("table tbody tr").hide(). 31 filter(":contains('" + ($(this).val()) + "')").show() 32 .addClass("selected").keyup(); 33 34 }); 35 }); 36 </script> 37 38 </head> 39 <body> 40 <form id="form1" runat="server"> 41 <div> 42 <p> 43 筛选:<input type="text" id="filterName"/> 44 </p> 45 <table> 46 <thead> 47 <tr> 48 <th> 49 姓名 50 </th> 51 <th> 52 性别 53 </th> 54 <th> 55 暂住地 56 </th> 57 </tr> 58 </thead> 59 <tbody> 60 <tr class="parent" id="row_01"> 61 <td colspan="3"> 62 前台设计组 63 </td> 64 </tr> 65 <tr class="child_row_01"> 66 <td> 67 王丹丹 68 </td> 69 <td> 70 女 71 </td> 72 <td> 73 杭州 74 </td> 75 </tr> 76 <tr class="child_row_01"> 77 <td> 78 刘莹莹 79 </td> 80 <td> 81 女 82 </td> 83 <td> 84 南京 85 </td> 86 </tr> 87 <tr class="parent" id="row_02"> 88 <td colspan="3"> 89 前台开发组 90 </td> 91 </tr> 92 <tr class="child_row_02"> 93 <td> 94 何晓晓 95 </td> 96 <td> 97 女 98 </td> 99 <td> 100 温哥华 101 </td> 102 </tr> 103 <tr class="child_row_02"> 104 <td> 105 毛龙龙 106 </td> 107 <td> 108 男 109 </td> 110 <td> 111 铁岭 112 </td> 113 </tr> 114 <tr class="parent" id="row_03"> 115 <td colspan="3"> 116 后台开发组 117 </td> 118 </tr> 119 <tr class="child_row_03"> 120 <td> 121 张康 122 </td> 123 <td> 124 男 125 </td> 126 <td> 127 伦敦 128 </td> 129 </tr> 130 <tr class="child_row_03"> 131 <td> 132 戴维斯 133 </td> 134 <td> 135 男 136 </td> 137 <td> 138 墨尔本 139 </td> 140 </tr> 141 </tbody> 142 </table> 143 </div> 144 </form> 145 </body> 146 </html>
效果图:
