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

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

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

請(qǐng)看圖： 將組名和個(gè)人信息聯(lián)表格聯(lián)系起來(lái)，這樣會(huì)很好的操作表格

HTML代碼：

   前臺(tái)設(shè)計(jì)組
   張三男浙江寧波
   李四男浙江寧波
   胡歌男浙江寧波
   前臺(tái)開(kāi)發(fā)組
   李三男浙江寧波
   張無(wú)忌男浙江寧波
   孔子男浙江寧波

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(); //，將符合條件的篩選出來(lái)
  
  });

下面是完整代碼：

 
 
 





 

  篩選：
 
 

  

   

    
姓名
    
性別
    
暫住地
   
  
  

   
前臺(tái)設(shè)計(jì)組
   
張三
男
浙江寧波
   
李四
男
浙江寧波
   
胡歌
男
浙江寧波
   
前臺(tái)開(kāi)發(fā)組
   
李三
男
浙江寧波
   
張無(wú)忌
男
浙江寧波
   
孔子
男
浙江寧波
   
后臺(tái)設(shè)計(jì)組
   
王五
男
浙江寧波
   
單志永
男
浙江寧波
   
劉粒粒
男
浙江寧波
  
 

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！