<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js"></script> </head> <body> <div> <span>输入查找的内容:</span> <input type="text" placeholder="输入查找的内容" id="seach"/> </div> <table border="1" id="table"> <!--表格的内容遍历出来的也可以--> <thead> <tr> <th>序号</th> <th>姓名</th> <th>省份</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>北京</td> <td>北京市</td> </tr> <tr> <td>2</td> <td>李四</td> <td>河北省</td> <td>石家庄市</td> </tr> <tr> <td>3</td> <td>王五</td> <td>辽宁省</td> <td>沈阳市</td> </tr> </tbody> </table> <script> //输入查找的内容实时搜索 $(document).on('keyup', '#seach', function () { value(this); }); function value(input){ var search = input.value.toLowerCase(); var table = $("#table").find("tbody tr"); table.each( function () { // if(!searchValue)return false; var tableTr = jQuery(this); var TrValue = tableTr.text().toLowerCase(); if (!TrValue.match(search)) { tableTr.hide(); } else { tableTr.show() } } ); } </script> </body> </html>
css样式用了最快捷、最丑的,忽略这一细节,功能是可以实现的!!!
如若table表格中有是需要输入的内容,也只是隐藏并没有清除数据,搜索完想要查看全部,将搜索框的内容清空即可