欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生JS 實現(xiàn)的input輸入時表格過濾操作示例

 更新時間:2019年08月03日 10:05:59   作者:sennyla  
這篇文章主要介紹了原生JS 實現(xiàn)的input輸入時表格過濾操作,結(jié)合實例形式分析了JavaScript基于頁面元素遍歷、運算、判斷實現(xiàn)的表格過濾相關操作技巧,需要的朋友可以參考下

本文實例講述了原生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 canvas繪制貝塞爾曲線

    基于JavaScript canvas繪制貝塞爾曲線

    這篇文章主要為大家詳細介紹了基于JavaScript canvas繪制貝塞爾曲線的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • JavaScript中的16進制字符介紹

    JavaScript中的16進制字符介紹

    最早接觸到\unnn之類的字符是在微軟的官網(wǎng)上。當時在網(wǎng)上找了一下這中字符格式,卻不知道該搜什么
    2011-10-10
  • 用JavaScript實現(xiàn)一個代碼簡潔、邏輯不復雜的多級樹

    用JavaScript實現(xiàn)一個代碼簡潔、邏輯不復雜的多級樹

    這篇文章主要介紹了用JavaScript實現(xiàn)一個代碼簡潔、邏輯不復雜的多級樹,需要的朋友可以參考下
    2014-05-05
  • 20個你不得不知道的js位運算用法

    20個你不得不知道的js位運算用法

    位運算,那些看似晦澀但又蘊含無限魔力的數(shù)字魔術,在JavaScript開發(fā)中扮演了默默無聞卻又至關重要的角色,本文介紹多個js位運算的使用場景,闡述在JavaScript中,如何巧妙運用位運算實現(xiàn)效率的提升和算法的優(yōu)化,需要的朋友可以參考下
    2023-12-12
  • 微信小程序 騰訊地圖顯示偏差問題解決

    微信小程序 騰訊地圖顯示偏差問題解決

    這篇文章主要介紹了微信小程序 騰訊地圖顯示偏差問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-07-07
  • js驗證密碼強度解析

    js驗證密碼強度解析

    這篇文章主要為大家詳細介紹了js驗證密碼強度,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • javascript限制用戶只能輸漢字中文的方法

    javascript限制用戶只能輸漢字中文的方法

    這篇文章主要介紹了javascript限制用戶只能輸漢字中文的方法,實例列舉了利用Unicode判斷與正則判斷兩種方法,具有一定的實用價值,需要的朋友可以參考下
    2014-11-11
  • javacript使用break內(nèi)層跳出外層循環(huán)分析

    javacript使用break內(nèi)層跳出外層循環(huán)分析

    這篇文章主要介紹了javacript使用break內(nèi)層跳出外層循環(huán)的用法,以實例形式對比分析了循環(huán)跳出break語句的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-01-01
  • 深入學習JS?XML和Fetch請求

    深入學習JS?XML和Fetch請求

    這篇文章主要介紹了深入學習JS?XML和Fetch請求,文章通過圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-09-09
  • 使用requestAnimationFrame實現(xiàn)js動畫性能好

    使用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

最新評論