[导读]：本文为大家介绍如何实现一个表格数据搜索的功能。 HTML 代码： input type = text id = myInput onkeyup = myFunction() placeholder = 搜索... table id = myTable tr class = header th style = width:60%; 名称 /...
本文为大家介绍如何实现一个表格数据搜索的功能。
HTML 代码：
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索..."> <table id="myTable"> <tr class="header"> <th style="width:60%;">名称</th> <th style="width:40%;">城市</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>CSS 代码：
#myInput { background-image: url('https://static.runoob.com/images/mix/searchicon.png'); /* 搜索按钮 */ background-position: 10px 12px; /* 定位搜索按钮 */ background-repeat: no-repeat; /* 不重复图片 */ width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { /* 表格添加边框 */ border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { /* 表头及鼠标移动过 tr 时添加背景 */ background-color: #f1f1f1; }JavaScript 代码：
function myFunction() { // 声明变量 var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); // 循环表格每一行，查找匹配项 for (i = 0; i < tr.length; i++) { 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"; } } } }提示： 如果你需要区分大小写可以移除 toUpperCase() 方法。
提示： 如果你需要检索第二列（城市）可以将 tr[i].getElementsByTagName('td')[0] 修改为 [1] 。索引值从 0 开始，即 0 为第一列，1 为第二列，以此类推。
在线演示
本文来自投稿，不代表微盟圈立场，如若转载，请注明出处：https://www.vm7.com/a/ziyuan/111839.html
