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

我們提供的服務(wù)有：網(wǎng)站制作、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、遷西ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的遷西網(wǎng)站制作公司

JavaScript是什么

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

需求：對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ù)量時，恢復(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ù)項一</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ù)學(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標簽</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;}

<!-- 效果 -->

看完上述內(nèi)容，你們對怎么在JavaScript中實現(xiàn)input輸入時表格過濾有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當前題目：怎么在JavaScript中實現(xiàn)input輸入時表格過濾-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://jinyejixie.com/article32/disppc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設(shè)、網(wǎng)站收錄、服務(wù)器托管、企業(yè)建站、定制開發(fā)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)