js實現(xiàn)表格篩選功能

更新時間：2017年01月18日 12:19:05 作者：單先生

本文主要介紹了js實現(xiàn)表格篩選功能的代碼。具有一定的參考價值，下面跟著小編一起來看下吧

本應(yīng)用就兩個主要實現(xiàn)：

1.表格的id 和 class之間的命名關(guān)系

請看圖：將組名和個人信息聯(lián)表格聯(lián)系起來，這樣會很好的操作表格

HTML代碼：

   <tr class="parent" id="row_01"><td colspan="3">前臺設(shè)計組</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="child_row_01"><td>胡歌</td><td>男</td><td>浙江寧波</td></tr>
   <tr class="parent" id="row_02"><td colspan="3">前臺開發(fā)組</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="child_row_02"><td>孔子</td><td>男</td><td>浙江寧波</td></tr>

2.就是篩選功能的使用：使用filter聯(lián)合contains將輸入框的字加入contains進(jìn)行篩選

javascript代碼：

 //設(shè)置列表查詢
 $("#filterName").keyup(function () {
  $("table tbody tr").stop().hide() //將tbody中的tr都隱藏
    .filter(":contains('"+($(this).val())+"')").show(); //，將符合條件的篩選出來
  
  });

下面是完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>表格應(yīng)用</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  .box{
   border: 1px solid #000;
   margin:50px auto;
   width: 340px;
   padding: 10px 10px;
  }
  .box table{
   margin: auto;
  }
  .box .box-top{
   width: 303px;
   margin: 5px auto;
  }
  .box table tr td,th{
   padding: 5px 30px;
   text-align: center;
  }
  .box table .parent{
   background: lightgray;
  }
  .selected{
   background: gray !important;
  }
  .selectHeight{
   background: darkseagreen !important;
  }
 </style>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
 $(function () {
  //默認(rèn)讓王五選中
  $("tr:contains('王五')").addClass("selectHeight")
  //點擊讓其展示出列表 默認(rèn)讓其都隱藏
  $(".box tr.parent").click(function () {
   $(this)
    .toggleClass("selected")
    .siblings(".child_"+this.id).stop().toggle();
  }).click();//此行代碼表示要立即執(zhí)行
  //設(shè)置列表查詢
  $("#filterName").keyup(function () {
   $("table tbody tr").stop().hide() //將tbody中的tr都隱藏
    .filter(":contains('"+($(this).val())+"')").show(); //，將符合條件的篩選出來
  });
 });
</script>
<div class="box">
 <div class="box-top">
  <span>篩選：</span><input type="text" id="filterName">
 </div>
 <table>
  <thead>
   <tr>
    <th>姓名</th>
    <th>性別</th>
    <th>暫住地</th>
   </tr>
  </thead>
  <tbody>
   <tr class="parent" id="row_01"><td colspan="3">前臺設(shè)計組</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="child_row_01"><td>胡歌</td><td>男</td><td>浙江寧波</td></tr>
   <tr class="parent" id="row_02"><td colspan="3">前臺開發(fā)組</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="child_row_02"><td>孔子</td><td>男</td><td>浙江寧波</td></tr>
   <tr class="parent" id="row_03"><td colspan="3">后臺設(shè)計組</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>
   <tr class="child_row_03"><td>劉粒粒</td><td>男</td><td>浙江寧波</td></tr>
  </tbody>
 </table>
</div>
</body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: