JS实现表格搜索内容

页面有表格的时候我们都会含有搜索功能，例如：

html和CSS略（源码滑倒底部），直接上JS：

function myFunction() { //如果有搜索按钮，定义一个onclick即可 // 声明变量 var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); //toUpperCase()是不区分大小写 table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); // 循环表格每一行，查找匹配项 for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; //这个0时要搜索第1列的内容，以此类推 if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { //如果要区分大小写就去掉这个toUpperCase() tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } }

这里只能搜索第1列名称的内容，想搜索城市搜不出来的，如果你想搜索第1列和第2列中任意内容，修改下面这行内容即可：

td = tr[i].getElementsByTagName("td")[0];//想搜索哪列内容就都放进去 td1 = tr[i].getElementsByTagName("td")[1];

这就可以搜索第1和第2列的内容了，即可搜索第一列的名称和第2列的城市，赶紧试试效果吧！

整体修改代码（看看跟上面的有啥区别）：

function myFunction() { //如果有搜索按钮，定义一个onclick即可 // 声明变量 var input, filter, table, tr, td,td1， i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); //toUpperCase()是不区分大小写 table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); // 循环表格每一行，查找匹配项 for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; //这个0时要搜索第1列的内容，以此类推 td1 = tr[i].getElementsByTagName("td")[1]; if (td || td1) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1 || td1.innerHTML.toUpperCase().indexOf(filter) > -1) { //如果要区分大小写就去掉这个toUpperCase() tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } }

 

 

锦上添花功能：

如果你想加上输入完搜索内容后，按 回车键 触发搜索，代码如下（直接复制可用）：

document.onkeydown = function (e) { if (!e) e = window.event; if ((e.keyCode || e.which) == 13) { var obtnLogin = document.getElementById("HuiCheSousuo"); //HuiCheSousuo为按钮ID obtnLogin.focus(); fun();//提交按钮触发的方法 } }

 

源码路径：https://www.runoob.com/w3cnote/javascript-table-search-filter.html

还有一个推荐：https://www.jb51.net/article/139940.htm

代码都很类似，万变不离其中。

function onku(obj){//js函数开始 setTimeout(function(){//因为是即时查询，需要用setTimeout进行延迟，让值写入到input内，再读取 var storeId = document.getElementById('store');//获取table的id标识 var rowsLength = storeId.rows.length;//表格总共有多少行 var key = obj.value;//获取输入框的值 var searchCol = 0;//要搜索的哪一列，这里是第一列，从0开始数起，如果是多列呢？用数组？自己测试看看； for(var i=1;i<rowsLength;i++){//按表的行数进行循环，本例第一行是标题，所以i=1，从第二行开始筛选（从0数起） var searchText = storeId.rows[i].cells[searchCol].innerHTML;//取得table行，列的值 if(searchText.match(key)){//用match函数进行筛选，如果input的值，即变量 key的值为空，返回的是ture， storeId.rows[i].style.display='';//显示行操作， }else{ storeId.rows[i].style.display='none';//隐藏行操作 } } },200);//200为延时时间 }