jquery表格内容筛选实现思路及代码

  

复制代码 代码如下:

  筛选:<input type="text" id="sea" />

  <table width="100%" id="se">

  <thead>

  <tr><th></th><th>姓名</th><th>性别</th><th>地址</th></tr>

  </thead>

  <tbody>

  <tr class="parent" id="row_01"><td colspan="3">一班</td></tr>

  <tr class="child_row_01"><td></td><td>大爷</td><td>男10</td><td>武汉1</td></tr>

  <tr class="child_row_01"><td></td><td>大爷</td><td>男9</td><td>武汉2</td></tr>

  <tr class="child_row_01"><td></td><td>大爷</td><td>男8</td><td>武汉3</td></tr>

  <tr class="parent" id="row_02"><td colspan="3">二班</td></tr>

  <tr class="child_row_02"><td></td><td>大爷</td><td>男7</td><td>武汉4</td></tr>

  <tr class="child_row_02"><td></td><td>大爷</td><td>男6</td><td>武汉5</td></tr>

  <tr class="child_row_02"><td></td><td>大爷</td><td>男5</td><td>武汉6</td></tr>

  <tr class="child_row_02"><td></td><td>大爷</td><td>男4</td><td>武汉7</td></tr>

  <tr class="parent" id="row_03"><td colspan="3">三班</td></tr>

  <tr class="child_row_03"><td></td><td>大爷</td><td>男3</td><td>武汉8</td></tr>

  <tr class="child_row_03"><td></td><td>大爷</td><td>男2</td><td>武汉9</td></tr>

  <tr class="child_row_03"><td></td><td>大爷</td><td>男1</td><td>武汉10</td></tr>

  </tbody>

  </table>

  <script type="text/javascript" >

  $(function(){

  $("#sea").keyup(function(){

  $("#se tbody tr").hide().filter(":contains('"+$(this).val()+"')").show();

  }).keyup();

  });

  </script>

  

复制代码 代码如下:

  // jquery表格内容筛选

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script src="../css/jquery-1.6.2.js"></script>

  <script>

  $(function(){

  $('tr.parent').click(function(){

  $(this).toggleClass("selected").siblings('.child_'+this.id).toggle();

  });

  });

  </script>

  <style>

  .selected{background:red};

  </style>

  <title>Untitled Document</title>

  </head>

  <body>

  <table>

  <thead>

  <tr>

  <th>姓名</th>

  <th>年龄</th>

  </tr>

  </thead>

  <tbody>

  <tr class="parent" id="row_01">

  <td colspan="2">人力部</td>

  </tr>

  <tr class="child_row_01">

  <td >脚本</td>

  <td>20</td>

  </tr>

  <tr class="child_row_01">

  <td >脚本</td>

  <td >20</td>

  </tr>

  <tr class="child_row_01">

  <td >脚本</td>

  <td >20</td>

  </tr>

  <tr class="parent" id="row_02">

  <td colspan="2">技术部</td>

  </tr>

  <tr class="child_row_02">

  <td >脚本</td>

  <td >20</td>

  </tr>

  <tr class="child_row_02">

  <td >脚本</td>

  <td >20</td>

  </tr>

  <tr class="child_row_02">

  <td >脚本</td>

  <td >20</td>

  </tr>

  </tbody>

  </table>

  </body>

  </html>