本文實(shí)例講述了JS實(shí)現(xiàn)table表格內(nèi)針對(duì)某列內(nèi)容進(jìn)行即時(shí)搜索篩選功能。分享給大家供大家參考，具體如下：

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、網(wǎng)絡(luò)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、朝陽網(wǎng)站維護(hù)、網(wǎng)站推廣。

往往有些時(shí)候，我們把數(shù)據(jù)從數(shù)據(jù)庫讀取出來，顯示到table里面，而此時(shí)來了個(gè)新需求，要在一個(gè)搜索框內(nèi)輸入關(guān)鍵字，表格的內(nèi)容進(jìn)行即時(shí)的篩選。

而即時(shí)觸發(fā)進(jìn)行數(shù)據(jù)庫的查詢，再回調(diào)顯示，就顯得慢，拖累服務(wù)器，降低用戶體驗(yàn)度，這時(shí)，要是有個(gè)純js操作，進(jìn)行表格某列的即時(shí)篩選，這樣既能提高搜索速度，也不用占用服務(wù)器資源，用戶自然也滿意。

實(shí)現(xiàn)如下，先看效果圖，

開始狀態(tài)：

在輸入框內(nèi)輸入‘e'，表格即時(shí)進(jìn)行篩選，篩選表格內(nèi)包含有‘e'的行，沒有‘e'的進(jìn)行隱藏，使用在線HTML/JS/css運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun，測(cè)試運(yùn)行效果如下圖所示：

實(shí)現(xiàn)代碼：

 

 

  
name
  
 
  
 
 
  
good
  
 
  
 
 
 

  
better
  
 
  
 
 
 

  
best
  
 
  
 
 
 

  
bad
  
 
  
 
 
 

  
worse
  
 
  
 
 
 

  
worst
  
 
  
 
 

標(biāo)題名稱：JS實(shí)現(xiàn)table表格內(nèi)針對(duì)某列內(nèi)容進(jìn)行即時(shí)搜索篩選功能-創(chuàng)新互聯(lián)
鏈接地址：http://weahome.cn/article/csggie.html