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

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),榕城企業(yè)網(wǎng)站建設(shè),榕城品牌網(wǎng)站建設(shè),網(wǎng)站定制,榕城網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,榕城網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

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

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

js實現(xià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進行篩選

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 () {
  //默認讓王五選中
  $("tr:contains('王五')").addClass("selectHeight")
  //點擊讓其展示出列表 默認讓其都隱藏
  $(".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í)或者工作能帶來一定的幫助，同時也希望多多支持創(chuàng)新互聯(lián)！

新聞標題：js實現(xiàn)表格篩選功能
鏈接URL：http://chinadenli.net/article12/iheodc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、外貿(mào)建站、手機網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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