zoukankan html css js c++ java

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>

查看全文

相关阅读:
git连接远程GitHub仓库详细总结 for HTTPS协议
 软工课程总结&小黄衫获奖感言
 Yum项目上线实战（网站运维）
MySQL基础
 Shell基础
 Linux网络基础
 Linux的权限管理操作
 linux自有服务（2）
Linux自有服务
 Linux基本指令

原文地址：https://www.cnblogs.com/Tian-yy/p/9596851.html

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

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