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

最新推荐文章于 2022-09-29 09:58:04 发布

aohezhong8813

最新推荐文章于 2022-09-29 09:58:04 发布

阅读量187

点赞数

原文链接：http://www.cnblogs.com/Tian-yy/p/9596851.html

版权

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

转载于:https://www.cnblogs.com/Tian-yy/p/9596851.html

aohezhong8813

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现table内某列的内容即时筛选

js<script>function onSearch(inp,el){ var oEl = document.getElementById(el); var oInp = document.getElementById(inp); oInp.oninput=function(){ // setTimeout(f...
复制链接

扫一扫