原生JS 实现的input输入时表格过滤操作示例

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

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

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