数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 HTML 表格中执行实时搜索和过滤？
当开发者开发实时 web 应用时，需要处理大量数据。例如，我们在网页上以表格形式列出了 1000 条产品数据。如果用户想在表格中查找特定产品，需要通过滚动浏览整个表格，这是一种非常糟糕的用户体验。
因此，有必要为表格添加搜索功能，允许用户搜索表格中的任何特定数据。在这里，我们将学习如何使用 JavaScript 和 jQuery 为表格添加搜索功能。
使用 JavaScript 在 HTML 表格中执行实时搜索和过滤
在本节中，当用户在表格中搜索任何值时，我们将遍历所有表格数据并搜索输入值。此外，我们将使用 indexOf() 方法检查任何单元格数据是否包含搜索值作为子字符串。
语法
用户可以按照以下语法在表格中搜索任何值。
if (td) {
if (txtValue.toLowerCase().indexOf(search_value) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
在上述语法中，我们检查当前单元格是否包含搜索值作为子字符串。如果是，则显示表格的特定行；否则，隐藏表格。
步骤
步骤 1 - 使用标签名称访问表格的所有行。
步骤 2 - 使用 for 循环遍历行数组。
步骤 3 - 在 for 循环中，访问第 i 行的所有列，并获取第一个单元格。
步骤 4 - 使用 innerText 或 textContent 属性获取单元格的文本并将其存储在 textValue 中。
步骤 5 - 使用 toLowerCase() 方法将文本值转换为小写。
步骤 6 - 使用 indexOf() 方法检查搜索值是否是当前单元格文本值的子字符串。
步骤 7 - 如果 indexOf() 方法返回“-1”，则通过更改 display 属性来隐藏当前行；否则，在网页上显示它。
示例 1
我们在下面的示例中创建了包含水果详细信息的 HTML 表格。我们还使用一些 CSS 属性为表格设置了样式。此外，我们创建了输入元素以接收用户的搜索输入。每当用户更改输入值时，我们都会调用 searchFruits() 函数。
在 searchFruits() 函数中，我们访问输入值和表格。之后，我们对表格行执行过滤操作，并根据行是否包含搜索值来显示或隐藏它们。
<html>
<head>
<style>
table {margin-top: 20px; border-collapse: collapse; border: 1px solid black; font-size: 18px;}
th, td {text-align: left; padding: 12px; border: 2px solid black;}
</style>
</head>
<body>
<h3> Using the <i> indexOf() method of JavaScript </i> to perform a real time search and filter on the table data </h3>
<input type="text" id="fruit_value" onkeyup="searchFruits()" placeholder="Search for fruit names..">
<table id="fruit_table">
<tr> <th> Fruit name </th><th> Fruit color </th> <th> Calories </th> </tr>
<tr> <td> Apple </td> <td> Red </td> <td> 95 </td> </tr>
<tr> <td> Banana </td> <td> Yellow </td> <td> 105 </td></tr>
<tr><td> Orange </td> <td> Orange </td> <td> 45 </td> </tr>
<tr> <td> Kiwi </td> <td> Green </td> <td> 42 </td></tr>
<tr> <td> Blueberry </td> <td> Blue </td> <td> 57 </td> </tr>
<tr> <td> Strawberry </td> <td> Red </td> <td> 49 </td> </tr>
<tr> <td> Raspberry </td> <td> Red </td> <td> 64 </td> </tr>
</table>
<script>
function searchFruits() {
let fruit_input = document.getElementById("fruit_value");
let search_value = fruit_input.value.toLowerCase();
let fruit_table = document.getElementById("fruit_table");
let tr = fruit_table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
// get the first column of every row
let td = tr[i].getElementsByTagName("td")[0];
if (td) {
// get the text content of the table cell
txtValue = td.textContent || td.innerText;
// If the search value is found in the table cell, show the row, otherwise hide it
if (txtValue.toLowerCase().indexOf(search_value) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</html>
使用 JQuery 在 HTML 表格中执行实时搜索和过滤
在本节中，我们将使用 JQuery 的 filter() 和 indexOf() 方法来过滤表格行。此外，我们还将在每一行上执行搜索操作。
语法
用户可以按照以下语法使用 jQuery 过滤表格行。
$("#programming_lang tr").filter(function () {
$(this).text()
.toLowerCase().indexOf(value) > -1 ? $(this).show() :
$(this).hide()
});
我们在上述语法中对每一行应用了 filter() 方法。此外，我们分别使用 show() 和 hide() 方法来显示和隐藏网页上的行。
步骤
步骤 1 - 使用 keyUp() 方法在用户更改搜索输入的值时执行过滤操作。
步骤 2 - 在 keyUp() 方法的回调函数中，访问搜索输入值并使用 toLowerCase() 方法将其转换为小写。
步骤 3 - 现在，访问所有表格行，并应用 filter() 方法。
步骤 4 - 在 filter() 方法的回调函数中，访问行文本，将其转换为小写，并使用 indexOf() 方法查找搜索值在行文本中的索引。
步骤 5 - 如果 indexOf() 方法返回大于 -1，则使用 show() 方法显示该行；否则，使用 hide() 方法隐藏该行。
示例 2
在下面的示例中，我们创建了包含编程语言数据的表格。此外，我们还添加了搜索功能，如上述步骤中所解释的那样。用户可以尝试搜索表格中的任何值并观察搜索结果。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
table {margin-top: 20px;border-collapse: collapse;border: 1px solid black;font-size: 18px;}
th,td {text-align: left;padding: 12px;border: 2px solid black;}
</style>
</head>
<body>
<h3> Using the <i> JQuery's filter() method </i> to perform a real time search and filter on the table data </h3>
<input type="text" id="lang_value" placeholder="Search for table data..">
<table id="programming_lang">
<tr><th> Language Name </th><th> Language Type </th><th> Rating </th></tr>
<tr><td> C </td> <td> Procedural </td> <td> 4 </td> </tr>
<tr><td> C++ </td> <td> Object Oriented </td> <td> 5 </td></tr>
<tr> <td> Java </td> <td> Object Oriented </td> <td> 5 </td> </tr>
<tr> <td> Python </td> <td> Object Oriented </td> <td> 5 </td> </tr>
<tr> <td> PHP </td> <td> Scripting </td> <td> 3 </td> </tr>
<tr> <td> JavaScript </td> <td> Scripting </td> <td> 5 </td> </tr>
<tr> <td> C# </td> <td> Object Oriented </td> <td> 4 </td> </tr>
<tr> <td> Ruby </td> <td> Scripting </td> <td> 4 </td> </tr>
<tr> <td> Swift </td> <td> Object Oriented </td> <td> 3 </td> </tr>
<tr> <td> Go </td> <td> Procedural </td> <td> 3 </td> </tr>
</table>
<script>
$('#lang_value').keyup(function () {
let value = $(this).val().toLowerCase();
$("#programming_lang tr").filter(function () {
$(this).text()
.toLowerCase().indexOf(value) > -1 ? $(this).show() :
$(this).hide()
});
$('#programming_lang tr:first').show();
});
</script>
</html>
1000+ 次浏览
