本文为大家介绍如何实现一个表格数据搜索的功能。

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.facesoho.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 为第二列 以此类推。

在线演示