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 = "";
    }
  }
}

<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過(guò)濾table數(shù)據(jù)</td>
    <td>111過(guò)濾table數(shù)據(jù)</td>
    <td>1111過(guò)濾table數(shù)據(jù)</td>
  </tr>
  <tr>
    <td class="firstTd">程序員不會(huì)英語(yǔ)怎么行？</td>
    <td>22過(guò)濾table數(shù)據(jù)</td>
    <td>222過(guò)濾table數(shù)據(jù)</td>
    <td>2222過(guò)濾table數(shù)據(jù)</td>
  </tr>
  <tr>
    <td class="firstTd">前端代碼編譯后添加過(guò)濾</td>
    <td>33過(guò)濾table數(shù)據(jù)</td>
    <td>333過(guò)濾table數(shù)據(jù)</td>
    <td>3333過(guò)濾table數(shù)據(jù)</td>
  </tr>
  <tr>
    <td class="firstTd">大數(shù)據(jù)學(xué)習(xí)</td>
    <td>44過(guò)濾table數(shù)據(jù)</td>
    <td>444過(guò)濾table數(shù)據(jù)</td>
    <td>4444過(guò)濾table數(shù)據(jù)</td>
  </tr>
  <tr>
    <td class="firstTd">JS過(guò)濾HTML標(biāo)簽</td>
    <td>55過(guò)濾table數(shù)據(jù)</td>
    <td>555過(guò)濾table數(shù)據(jù)</td>
    <td>5555過(guò)濾table數(shù)據(jù)</td>
  </tr>
  <tr>
    <td class="firstTd">大數(shù)據(jù)你了解多少</td>
    <td>66過(guò)濾table數(shù)據(jù)</td>
    <td>666過(guò)濾table數(shù)據(jù)</td>
    <td>6666過(guò)濾table數(shù)據(jù)</td>
  </tr>
</table>

table{border: 1px solid #ccc;width: 900px;}
table tr:nth-child(odd){background:#F4F4F4;}
table tr:nth-child(even){background:#fff;}