原生JS 實(shí)現(xiàn)的input輸入時(shí)表格過濾操作示例
本文實(shí)例講述了原生JS 實(shí)現(xiàn)的input輸入時(shí)表格過濾操作。分享給大家供大家參考，具體如下：
需求：對(duì)input框進(jìn)行鍵盤輸入后根據(jù)輸入的內(nèi)容去匹配表格中指定的數(shù)據(jù)項(xiàng)，若存在相匹配的則只顯示匹配的數(shù)據(jù)項(xiàng)；
細(xì)節(jié)處理：監(jiān)聽鍵盤輸入后給一定的緩沖時(shí)間避免發(fā)生頻繁的請(qǐng)求；
解決思路：給個(gè)定時(shí)器，當(dāng)鍵盤開始輸入時(shí)啟動(dòng)定時(shí)器，倘若在指定的時(shí)間內(nèi)都不在進(jìn)行輸入操作，則執(zhí)行匹配操作，否則取消操作，同時(shí)限定輸入的字符串大于等于2位數(shù)字時(shí)再進(jìn)行匹配操作，使過濾效果更精準(zhǔn)一些。
<!--JS -->
var timer = null; //定義定時(shí)器
function filterTable(el){
clearTimeout(timer);
var oTable = document.getElementById("oTable");
//獲取需要匹配的元素集合
var firstTdArr = oTable.getElementsByClassName("firstTd");
if(el.value.length>1){ //限定匹配的字符至少為兩位數(shù)
var filterVal = el.value.toUpperCase();
timer = setTimeout(function(){
for(var i=0;i<firstTdArr.length;i++){
//元素集合中存在匹配值時(shí)，顯示匹配的記錄，否則隱藏
if (firstTdArr[i].innerHTML.toUpperCase().indexOf(filterVal) > -1) {
firstTdArr[i].parentNode.style.display = "";
}else{
firstTdArr[i].parentNode.style.display = "none";
}
}
},500);
}else{
//不滿足匹配所需字符數(shù)量時(shí)，恢復(fù)匹配之前的模樣
for(var i=0;i<firstTdArr.length;i++){
firstTdArr[i].parentNode.style.display = "";
}
}
}
<!-- HTML -->
<p><input type="text" οnkeyup="filterTable(this)"/></p>
<table id="oTable">
<tr>
<th>匹配數(shù)據(jù)</th>
<th>數(shù)據(jù)項(xiàng)一</th>
<th>數(shù)據(jù)項(xiàng)二</th>
<th>數(shù)據(jù)項(xiàng)三</th>
</tr>
<tr>
<td class="firstTd">JS前端數(shù)據(jù)多條件篩選</td>
<td>11過濾table數(shù)據(jù)</td>
<td>111過濾table數(shù)據(jù)</td>
<td>1111過濾table數(shù)據(jù)</td>
</tr>
<tr>
<td class="firstTd">程序員不會(huì)英語怎么行？</td>
<td>22過濾table數(shù)據(jù)</td>
<td>222過濾table數(shù)據(jù)</td>
<td>2222過濾table數(shù)據(jù)</td>
</tr>
<tr>
<td class="firstTd">前端代碼編譯后添加過濾</td>
<td>33過濾table數(shù)據(jù)</td>
<td>333過濾table數(shù)據(jù)</td>
<td>3333過濾table數(shù)據(jù)</td>
</tr>
<tr>
<td class="firstTd">大數(shù)據(jù)學(xué)習(xí)</td>
<td>44過濾table數(shù)據(jù)</td>
<td>444過濾table數(shù)據(jù)</td>
<td>4444過濾table數(shù)據(jù)</td>
</tr>
<tr>
<td class="firstTd">JS過濾HTML標(biāo)簽</td>
<td>55過濾table數(shù)據(jù)</td>
<td>555過濾table數(shù)據(jù)</td>
<td>5555過濾table數(shù)據(jù)</td>
</tr>
<tr>
<td class="firstTd">大數(shù)據(jù)你了解多少</td>
<td>66過濾table數(shù)據(jù)</td>
<td>666過濾table數(shù)據(jù)</td>
<td>6666過濾table數(shù)據(jù)</td>
</tr>
</table>
<!-- CSS3 -->
table{border: 1px solid #ccc;width: 900px;}
table tr:nth-child(odd){background:#F4F4F4;}
table tr:nth-child(even){background:#fff;}
<!-- 效果 -->
感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具：http://tools.jb51.net/code/WebCodeRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過濾內(nèi)容下拉菜單排序過濾敏感字符驗(yàn)證判斷后添加表格信息)
- js中過濾特殊字符的正則表達(dá)式
- js過濾HTML標(biāo)簽以及空格的思路及代碼
- Javascript 5種方法實(shí)現(xiàn)過濾刪除前后所有空格
- js特殊字符過濾的示例代碼
- 用js實(shí)現(xiàn)過濾script的正則
- JS敏感詞過濾代碼
- js過濾HTML標(biāo)簽完整實(shí)例
- 利用javascript/jquery對(duì)上傳文件格式過濾的方法
- 用于過濾空白字符的幾種常見的js正則表達(dá)式pattern
- js限制input只能輸入有效的數(shù)字(第一個(gè)不能是小數(shù)點(diǎn))
相關(guān)文章
這篇文章主要介紹了js文件包含的幾種方式，在某些情況下還是比較實(shí)用的，下面以示例代碼的方式來呈現(xiàn)2014-09-09
一個(gè)單例對(duì)象,承載大多數(shù)常用的函數(shù)列表2009-10-10
計(jì)算機(jī)系統(tǒng)并不是通過文件的后綴名來判斷文件類型,而是通過文件簽名來判斷,下面這篇文章主要給大家介紹了關(guān)于JavaScript判斷文件類型三種方法的相關(guān)資料,需要的朋友可以參考下2024-04-04
bootstrap+jQuery 實(shí)現(xiàn)下拉菜單中復(fù)選框全選和全不選效果
這篇文章主要給大家介紹了關(guān)于利用bootstrap+jQuery 實(shí)現(xiàn)下拉菜單中復(fù)選框全選和全不選效果的相關(guān)資料，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友下面來一起看看吧。2017-06-06
微信小程序?qū)崿F(xiàn)Session功能及無法獲取session問題的解決方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)Session功能及無法獲取session問題的解決方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
閉包是一個(gè)比較抽象的概念,尤其是對(duì)js新手來說.書上的解釋實(shí)在是比較晦澀,對(duì)我來說也是一樣.閉包是很多語言都具備的特性,在js中,閉包主要涉及到j(luò)s的幾個(gè)其他的特性:作用域鏈,垃圾(內(nèi)存)回收機(jī)制,函數(shù)嵌套,等等.2015-03-03
layer彈出層父子頁(yè)面事件相互調(diào)用方法
今天小編就為大家分享一篇layer彈出層父子頁(yè)面事件相互調(diào)用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崟r(shí)聊天WebSocket的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了JS中的Map對(duì)象用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
JS密碼生成與強(qiáng)度檢測(cè)完整實(shí)例(附demo源碼下載)
這篇文章主要介紹了JS密碼生成與強(qiáng)度檢測(cè)完整實(shí)例,涉及JavaScript密碼的生成,破解時(shí)間計(jì)算,密碼安全監(jiān)測(cè)及大小寫鎖定判斷等功能的實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04