引言
在前端开发中，我们经常会使用表格来展示大量的数据。当数据变得越来越多时，用户可能需要进行搜索和筛选操作来更好地浏览数据。本文将介绍如何使用JavaScript和jQuery在HTML表格上执行实时搜索和筛选。
准备工作
在实现搜索和筛选之前，我们需要有一个示例表格来演示如何实现这些功能。以下是一个简单的HTML表格示例：
-- -------------------- ---- -------
------ -------------
-------
----
-------------
------------
-------------
-----
--------
-------
----
-------------
-----------
------- ---------
-----
----
-------------
-----------
----------------
-----
----
------------
-----------
------- ------------
-----
--------
--------实时搜索
实时搜索是指当用户输入文本时，表格中只显示包含该文本的行。下面是实现实时搜索的代码：
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});以上代码使用了jQuery的keyup()方法，它会在用户按下键盘某个键时触发。当用户输入文本时，我们获取该文本并转换为小写字母，然后过滤出不包含该文本的表格行并将其隐藏。
为了实现这一功能，需要添加一个文本框来接收用户的搜索关键字：
<input type="text" id="myInput" placeholder="Search...">
实时筛选
实时筛选是指当用户选择特定条件时，在表格中只显示符合条件的行。下面是实现实时筛选的代码：
$(document).ready(function(){
$("#mySelect").on("change", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).find("td:nth-child(2)").text().toLowerCase().indexOf(value) > -1)
});
});
});以上代码使用了jQuery的change()方法，它会在下拉菜单的值变化时触发。当用户选择特定条件时，我们获取选择的值并转换为小写字母，然后过滤出不符合条件的表格行并将其隐藏。
为了实现这一功能，需要添加一个下拉菜单来提供筛选条件：
<select id="mySelect"> <option value="">All</option> <option value="new york">New York</option> <option value="chicago">Chicago</option> <option value="los angeles">Los Angeles</option> </select>
上述代码中，第一个选项为“全部”，表示不进行筛选。
结论
通过以上代码，我们可以在HTML表格上实现实时搜索和筛选功能。这些功能可以提高用户浏览数据的效率，使用户更加轻松地找到他们需要的信息。
完整示例代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------- ------ --- ------ -- ---- ------------- ------- ----------------------------------------------------------- ------- ------ ------ ----------- ------------ ------------------------ ------- -------------- ------- --------------------- ------- ---------- ---- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------
