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