小编给大家分享一下用js实现表格数据搜索的源代码，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

具体代码如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格数据搜索</title> <link href="../css/表格数据搜索.css" rel="external nofollow" rel="stylesheet"></head><body><input type="text" placeholder="搜索..." id="myInput" onkeyup="myFunction()"><table id="myTable"> <tr> <th>名称</th> <th>城市</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Berglunds snabbkop</td> <td>Sweden</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> <tr> <td>Koniglich Essen</td> <td>Germany</td> </tr></table><script src="../js/表格数据搜索.js"></script></body></html>

CSS:

#myInput{ background: url('https://cache.yisu.com/upload/information/20200809/112/12241.png')no-repeat; background-position: 10px 12px; width:100%; padding: 12px 20px 12px 40px; border:1px solid #ddd; font-size: 16px; margin-bottom: 12px; border-radius: 6px;}#myTable { width: 100%; border: 1px solid #ddd; font-size: 18px; border-collapse:collapse;}#myTable th,td{ text-align: left; padding:15px 12px;}#myTable tr{ /* 表格添加边框 */ border-bottom:1px solid #ddd;}#myTable tr:hover{ background-color: #f1f1f1;}#myTable th{ background-color: #f1f1f1;}

JS:

function myFunction() { var myInput=document.getElementById("myInput"); var filter=myInput.value.toUpperCase(); var table=document.getElementById("myTable"); var tr=table.getElementsByTagName("tr"); //循环列表每一项，查找匹配项 for(var i=0;i<tr.length;i++) { var td = tr[i].getElementsByTagName("td")[0]; if (td){ if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } }}

看完了这篇文章，相信你对用js实现表格数据搜索的源代码有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！