您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
小编给大家分享一下用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实现表格数据搜索的源代码有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。