js实现table内某列的内容即时筛选

<script>
function onSearch(inp,el){
    var oEl = document.getElementById(el);
    var oInp = document.getElementById(inp);
    oInp.oninput=function(){  
        // setTimeout(function(){   
            var rows = oEl.rows.length;//获取行数
            var inpVal = oInp.value;//输入框的值
            for(var i=1;i<rows;i++){
                var cellText = oEl.rows[i].cells[0].innerHTML;//获取表格i行  0列的值
                if(cellText.includes(inpVal)){ //判断表格里是否包含输入框里的值
                    oEl.rows[i].style.display='';   
                }else{
                    oEl.rows[i].style.display='none';
                }
            }

        // },200)
    }
}
onSearch('inp','store')

</script>

html:

<body>
    <div > 
        <input name="key" type="text" id="inp" value="" /></div>
    <table width="200" border="1" id="tab">
      <tr bgcolor="#CCCCCC">
        <td>name</td>
        <td> </td>
        <td>name </td>
      </tr>
        <td>good</td>
        <td>d </td>
        <td> </td>
      </tr>
      <tr>
        <td>better</td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td>best</td>
        <td></td>
        <td> </td>
      </tr>
      <tr>
        <td>bad</td>
        <td> </td>
        <td></td>
      </tr>
      <tr>
        <td>worse</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>worst</td>
        <td></td>
        <td></td>
      </tr>
    </table>
     
</body>

js实现table内 某列的内容即时筛选

js实现table内某列的内容即时筛选