怎么在JavaScript中實現input輸入時表格過濾

今天就跟大家聊聊有關怎么在JavaScript中實現input輸入時表格過濾，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

JavaScript是什么

JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發，可以給網站添加各種各樣的動態效果，讓網頁更加美觀。

需求：對input框進行鍵盤輸入后根據輸入的內容去匹配表格中指定的數據項，若存在相匹配的則只顯示匹配的數據項；

細節處理：監聽鍵盤輸入后給一定的緩沖時間避免發生頻繁的請求；

解決思路：給個定時器，當鍵盤開始輸入時啟動定時器，倘若在指定的時間內都不在進行輸入操作，則執行匹配操作，否則取消操作，同時限定輸入的字符串大于等于2位數字時再進行匹配操作，使過濾效果更精準一些。

<!--JS -->

var timer = null; //定義定時器
function filterTable(el){
  clearTimeout(timer);
  var oTable = document.getElementById("oTable");
  //獲取需要匹配的元素集合
  var firstTdArr = oTable.getElementsByClassName("firstTd");
  if(el.value.length>1){ //限定匹配的字符至少為兩位數
    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{
    //不滿足匹配所需字符數量時，恢復匹配之前的模樣
    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>匹配數據</th>
    <th>數據項一</th>
    <th>數據項二</th>
    <th>數據項三</th>
  </tr>
  <tr>
    <td class="firstTd">JS前端數據多條件篩選</td>
    <td>11過濾table數據</td>
    <td>111過濾table數據</td>
    <td>1111過濾table數據</td>
  </tr>
  <tr>
    <td class="firstTd">程序員不會英語怎么行？</td>
    <td>22過濾table數據</td>
    <td>222過濾table數據</td>
    <td>2222過濾table數據</td>
  </tr>
  <tr>
    <td class="firstTd">前端代碼編譯后添加過濾</td>
    <td>33過濾table數據</td>
    <td>333過濾table數據</td>
    <td>3333過濾table數據</td>
  </tr>
  <tr>
    <td class="firstTd">大數據學習</td>
    <td>44過濾table數據</td>
    <td>444過濾table數據</td>
    <td>4444過濾table數據</td>
  </tr>
  <tr>
    <td class="firstTd">JS過濾HTML標簽</td>
    <td>55過濾table數據</td>
    <td>555過濾table數據</td>
    <td>5555過濾table數據</td>
  </tr>
  <tr>
    <td class="firstTd">大數據你了解多少</td>
    <td>66過濾table數據</td>
    <td>666過濾table數據</td>
    <td>6666過濾table數據</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;}

<!-- 效果 -->

看完上述內容，你們對怎么在JavaScript中實現input輸入時表格過濾有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。