在web开发中，为表格添加搜索和过滤功能是提升用户体验的常见需求。对于文本内容的过滤，通常使用keyup事件监听用户输入，并实时更新表格显示。然而，当涉及到日期输入框（<input type="date">）时，由于其特有的交互方式（例如通过日历选择器选择日期），keyup事件并不能有效地捕获所有值变化。本文将深入探讨这一问题，并提供一个基于change事件的健壮解决方案，实现表格中日期数据的精确过滤。
HTML结构
首先，我们需要一个基本的HTML页面结构，包含一个日期输入框用于搜索，以及一个带有日期列的表格。为了使用jQuery，请确保引入了jQuery库。
<!DOCTYPE html>
<html>
<head>
<title>jQuery表格日期过滤教程</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
/* CSS样式将在此处添加 */
</style>
</head>
<body>
<input id="myInput" type="date" placeholder="Search Date..">
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Date</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Johnny</td>
<td>Depp</td>
<td>2022-06-03</td>
</tr>
<tr>
<td>Angelina</td>
<td>Jolie</td>
<td>2022-06-04</td>
</tr>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>2022-06-05</td>
</tr>
<tr>
<td>Lebron</td>
<td>James</td>
<td>2022-06-06</td>
</tr>
<tr>
<td>Scarlett</td>
<td>Johansson</td>
<td>2022-06-07</td>
</tr>
</tbody>
</table>
</body>
</html>CSS样式
为了使表格更具可读性，我们可以添加一些基本的CSS样式。
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}将上述CSS代码放置在HTML文件的<head>标签内的<style>标签中。
JavaScript逻辑：核心解决方案
传统的文本输入框过滤通常使用keyup事件。然而，对于<input type="date">，当用户通过点击日历控件选择日期时，keyup事件并不会触发，因为没有键盘按键被按下。为了捕获这种类型的输入变化，我们需要使用change事件。change事件在元素的值被改变且失去焦点时触发，这对于日期选择器来说是理想的。
以下是实现日期过滤的JavaScript代码：
$(document).ready(function(){
$("#myInput").on("change", function() { // 关键：使用 'change' 事件
let value = $(this).val(); // 获取输入框的值
// 如果日期输入框为空，则显示所有行
if (!value) {
$("#myTable tr").show();
return;
}
// 将输入值转换为小写以进行不区分大小写的匹配
value = value.toLowerCase();
$("#myTable tr").filter(function() {
// 获取当前行的所有文本内容并转换为小写
const rowText = $(this).text().toLowerCase();
// 检查当前行文本是否包含输入的日期值
// 这里的日期格式必须与表格中的日期格式一致
const isMatch = rowText.indexOf(value) > -1;
// 根据匹配结果显示或隐藏行
$(this).toggle(isMatch);
});
});
});将上述JavaScript代码放置在HTML文件的<bodyyoujiankuohaophpcn标签的底部，或者在<head>标签内，但需要确保在DOM加载完成后执行（即在$(document).ready()函数内部）。
代码解析
- $(document).ready(function(){ ... });: 确保DOM完全加载后再执行脚本，避免操作尚未存在的元素。
- $("#myInput").on("change", function() { ... });: 这是核心改动。我们不再监听keyup事件，而是监听change事件。当用户通过键盘输入、粘贴或者通过日历选择器选择日期并使输入框失去焦点时，此事件都会触发。
- let value = $(this).val();: 获取日期输入框当前的值。对于input type="date"，这个值通常是YYYY-MM-DD格式的字符串。
- if (!value) { ... }: 这是一个优化。如果用户清空了日期输入框，我们应该显示表格中的所有行，而不是隐藏它们。
- value = value.toLowerCase();: 将获取到的日期值转换为小写。虽然日期通常不区分大小写，但为了与表格内容进行一致的字符串匹配，这是一个好的习惯。
- $("#myTable tr").filter(function() { ... });: 遍历id为myTable的<tbody>内的所有<tr>元素。filter()函数会根据回调函数的返回值（true或false）来决定是否保留当前元素。
- const rowText = $(this).text().toLowerCase();: 在每次迭代中，获取当前行（<tr>）的所有文本内容，并将其转换为小写。
- const isMatch = rowText.indexOf(value) > -1;: 使用indexOf()方法检查当前行的文本内容是否包含用户输入的日期字符串。如果包含，indexOf()会返回匹配的起始索引（大于-1），否则返回-1。
- $(this).toggle(isMatch);: toggle()是一个非常方便的jQuery方法。如果isMatch为true，则显示当前行；如果为false，则隐藏当前行。
注意事项
- 事件选择的重要性：input type="date"元素在用户通过日历控件选择日期时，不会触发keyup事件。因此，使用change事件是捕获这类值变化的正确方式。change事件在元素值改变且元素失去焦点时触发，这包括手动输入并切换焦点、粘贴内容或通过日期选择器选择日期。
-
日期格式一致性：确保input type="date"输出的日期格式（通常是YYYY-MM-DD）与表格中<td>元素内日期的显示格式完全一致。如果表格中的日期是MM/DD/YYYY或DD-MM-YYYY等其他格式，则indexOf()匹配将失败。在这种情况下，你需要：
- 统一表格中的日期格式为YYYY-MM-DD。
- 或者，在JavaScript中解析并格式化input的值，使其与表格中的日期格式匹配。
- 精确匹配的局限性：当前方案是基于字符串的精确包含匹配。这意味着它只能查找完全匹配的日期。它不支持日期范围查询（例如，查找2022年6月1日到2022年6月10日之间的所有日期）或模糊日期匹配（例如，输入“06”来查找所有6月份的日期）。如果需要这些高级功能，则需要更复杂的日期解析库（如Moment.js或date-fns）以及日期比较逻辑。
-
性能考量：对于包含大量行（例如数千行）的表格，每次change事件都遍历并操作所有DOM元素可能会导致性能下降。对于非常大的数据集，可以考虑以下优化：
- 去抖（Debounce）：如果使用input type="text"作为日期输入，或者用户可能快速输入日期，可以使用去抖技术限制函数执行频率。但对于input type="date"的change事件，通常不是问题，因为它只在值确定后触发一次。
- 服务器端过滤：对于非常大的表格，最有效的解决方案是将过滤逻辑放在服务器端。用户输入过滤条件后，发送AJAX请求到服务器，服务器返回过滤后的数据，然后更新表格。
总结
通过将事件监听从keyup切换到change，我们成功地解决了使用input type="date"元素进行表格日期过滤的难题。这个解决方案简单有效，适用于大多数客户端表格日期筛选的需求。在实际应用中，请务必关注日期格式的一致性，并根据表格数据量的大小考虑潜在的性能优化。
