js动态查询表格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格搜索</title> </head> <script> //实现功能,搜索显示,大小写搜索不会影响,模糊搜索 window.onload=function () { var otab = document.getElementById('theader'); var obtn = document.getElementById('search'); var otext = document.getElementById('keyword'); obtn.onclick=function () { for (var i = 0; i < otab.tBodies[0].rows.length ; i++) { var stab = otab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();//cells[2]表示搜索表格第二列 var stext = otext.value.toLowerCase(); // toLowerCase()将英文全部转换成小写,为了用户在输入小写的时候仍然可以将内容搜索出来 var arr = stext.split(' '); //split的作用将某一段字符串按照指定字符进行切割 otab.tBodies[0].rows[i].style.background = "";//确保在下一次搜索时上一次搜索不会影响这次搜索的结果 for (var j = 0; j < arr.length; j++) { var type=0; if (stab.search(arr[j]) != -1) { otab.tBodies[0].rows[i].style.background = 'yellow'; type=1; } if(type!=1) { otab.tBodies[0].rows[i].style.display="none"; } } } } } </script> <body> 姓名:<input id="keyword" type="text" /> <input id="search" type="button" value="搜索" /> <table id="theader" width="500" border="1"> <thead> <td>序号</td> <td>姓名</td> <td>学号</td> <td>年龄</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>丁冯超</td> <td>李</td> <td>21</td> <td></td> </tr> <tr> <td>2</td> <td>钟辉</td> <td>王</td> <td>20</td> <td></td> </tr> <tr> <td>3</td> <td>申振</td> <td>赵</td> <td>23</td> <td></td> </tr> <tr> <td>4</td> <td>丁元超</td> <td>孙</td> <td>21</td> <td></td> </tr> <tr> <td>5</td> <td>于加良</td> <td>前</td> <td>20</td> <td></td> </tr> </tbody> </table> </body> </html>