原生JS 實現(xiàn)的input輸入時表格過濾操作示例
本文實例講述了原生JS 實現(xiàn)的input輸入時表格過濾操作。分享給大家供大家參考,具體如下:
需求:對input框進行鍵盤輸入后根據(jù)輸入的內(nèi)容去匹配表格中指定的數(shù)據(jù)項,若存在相匹配的則只顯示匹配的數(shù)據(jù)項;
細節(jié)處理:監(jiān)聽鍵盤輸入后給一定的緩沖時間避免發(fā)生頻繁的請求;
解決思路:給個定時器,當鍵盤開始輸入時啟動定時器,倘若在指定的時間內(nèi)都不在進行輸入操作,則執(zhí)行匹配操作,否則取消操作,同時限定輸入的字符串大于等于2位數(shù)字時再進行匹配操作,使過濾效果更精準一些。
<!--JS -->
var timer = null; //定義定時器 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++){ //元素集合中存在匹配值時,顯示匹配的記錄,否則隱藏 if (firstTdArr[i].innerHTML.toUpperCase().indexOf(filterVal) > -1) { firstTdArr[i].parentNode.style.display = ""; }else{ firstTdArr[i].parentNode.style.display = "none"; } } },500); }else{ //不滿足匹配所需字符數(shù)量時,恢復匹配之前的模樣 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ù)項一</th> <th>數(shù)據(jù)項二</th> <th>數(shù)據(jù)項三</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">程序員不會英語怎么行?</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ù)學習</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標簽</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)試運行工具:http://tools.jb51.net/code/WebCodeRun測試上述代碼運行效果。
更多關于JavaScript相關內(nèi)容可查看本站專題:《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript數(shù)學運算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
用JavaScript實現(xiàn)一個代碼簡潔、邏輯不復雜的多級樹
這篇文章主要介紹了用JavaScript實現(xiàn)一個代碼簡潔、邏輯不復雜的多級樹,需要的朋友可以參考下2014-05-05javacript使用break內(nèi)層跳出外層循環(huán)分析
這篇文章主要介紹了javacript使用break內(nèi)層跳出外層循環(huán)的用法,以實例形式對比分析了循環(huán)跳出break語句的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01使用requestAnimationFrame實現(xiàn)js動畫性能好
requestAnimationFrame優(yōu)于setTimeout/setInterval的地方在于它是由瀏覽器專門為動畫提供的API,在運行時瀏覽器會自動優(yōu)化方法的調(diào)用,并且如果頁面不是激活狀態(tài)下的話,動畫會自動暫停,有效節(jié)省了CPU開銷,這篇文章給大家詳細介紹使用requestAnimationFrame實現(xiàn)js動畫2015-08-08