在网页开发中，表格是非常常见和重要的组件之一。而对于大型的数据表格，为了提升用户体验，我们通常需要添加一个搜索功能，让用户可以快速找到他们想要的信息。在这篇文章中，我将教你如何使用 JavaScript 实现表格搜索功能。
简介
首先，我们需要明确我们的目标：在一个包含多行和多列的表格中，实现一个搜索输入框，用户可以通过输入关键字来搜索表格，并高亮显示匹配的结果。
准备工作
在开始之前，我们需要一个带有一些数据的表格，以及一个文本输入框和一个按钮，用户可以在输入框中输入关键字，并通过点击按钮来触发搜索。下面是一个示例的 HTML 结构：
<!DOCTYPE html>
<html>
<head>
<title>表格搜索功能</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<input type="text" id="searchInput">
<button onclick="searchTable()">搜索</button>
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>女</td>
</tr>
</table>
</body>
</html>
在上述代码中，我们创建了一个包含三列的表格，并在最上方添加了一个输入框和一个按钮。这个输入框和按钮后面会用 JavaScript 来添加事件监听，实现搜索功能。
实现搜索功能
现在让我们来写一些 JavaScript 代码来实现搜索功能。我们首先需要获取输入框和表格的引用，然后通过添加事件监听来实现搜索功能。下面是一种实现方式：
function searchTable() {
// 获取输入框的值
var input = document.getElementById('searchInput');
var filter = input.value.toUpperCase();
// 获取表格的引用
var table = document.getElementById('myTable');
// 获取表格中的每一行
var trs = table.getElementsByTagName('tr');
// 遍历每一行，判断是否满足搜索条件
for (var i = 1; i < trs.length; i++) {
var tr = trs[i];
// 获取当前行的所有单元格
var tds = tr.getElementsByTagName('td');
// 标记当前行是否需要显示
var shouldDisplay = false;
// 遍历当前行的每一个单元格，判断是否满足搜索条件
for (var j = 0; j < tds.length; j++) {
var td = tds[j];
// 如果当前单元格的文本包含搜索关键字，将 shouldDisplay 设置为 true，并退出循环
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
shouldDisplay = true;
break;
}
}
// 根据 shouldDisplay 的值来设置当前行的显示与隐藏
if (shouldDisplay) {
tr.style.display = "";
} else {
tr.style.display = "none";
}
}
}
在上述代码中，我们首先获取了输入框的值，并将其转换为大写字母，以便进行大小写不敏感的搜索。然后，我们获取到了整个表格的引用以及每一行的引用。通过遍历每一行，我们再次使用循环来遍历每一个单元格，并判断其文本是否包含搜索关键字。最后，我们根据判断结果来设置当前行的显示与隐藏。
结束语
通过上述的步骤，我们已经成功地使用 JavaScript 实现了表格的搜索功能。当用户输入关键字并点击搜索按钮时，我们会根据关键字来过滤表格中的数据，并高亮显示匹配的结果。这样，用户就可以更方便地找到他们需要的信息了。希望这篇文章能对你有所帮助！
本文来自极简博客，作者：北极星光，转载请注明原文链接：如何用JavaScript实现表格搜索功能
