引言
在web应用开发中，表格数据展示和筛选是常见需求。当表格中包含日期信息时，用户往往希望能够通过日期输入框进行快速筛选。jquery提供了一种简洁高效的方式来实现这一功能。然而，对于html5的<input type="date">元素，其行为与普通文本输入框有所不同，这要求我们在事件监听上做出相应的调整，以确保筛选逻辑能够正确触发。
理解问题：input type="date"与事件监听
传统的文本输入框（<input type="text">）通常通过监听keyup事件来实时捕获用户的输入，并立即执行搜索或筛选操作。例如：
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});这段代码对于文本输入框非常有效，它会实时根据用户键入的字符筛选表格行。然而，当我们将输入框类型改为<input type="date">时，问题就出现了。<input type="date">元素在用户通过日历选择器选择日期时，并不会触发keyup事件，因为用户并没有“键入”字符。因此，如果继续使用keyup事件，当用户通过日历选择日期后，筛选功能将不会被激活，导致用户体验不佳。
解决方案：利用change事件进行日期筛选
解决input type="date"筛选问题的关键在于选择正确的事件监听器。change事件会在元素的值发生改变并且失去焦点时触发。对于<input type="date">，这意味着当用户通过日历选择了一个日期并关闭日历选择器，或者手动输入日期并离开输入框时，change事件就会被触发。这正是我们希望筛选逻辑执行的时机。
将事件监听从keyup改为change，即可完美解决此问题：
$(document).ready(function(){
$("#myInput").on("change", function() { // 将 keyup 改为 change
let value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
// 假设表格中的日期格式与 input type="date" 的输出格式一致 (YYYY-MM-DD)
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});完整实现示例
以下是一个完整的HTML页面示例，展示了如何使用jQuery和change事件实现表格日期筛选功能：
<!DOCTYPE html>
<html>
<head>
<title>jQuery表格日期筛选</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
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;
}
input[type="date"] {
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<input id="myInput" type="date" placeholder="搜索日期..">
<br><br>
<table>
<thead>
<tr>
<th>姓名</th>
<th>姓氏</th>
<th>日期</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>张</td>
<td>三</td>
<td>2022-06-03</td>
</tr>
<tr>
<td>李</td>
<td>四</td>
<td>2022-06-04</td>
</tr>
<tr>
<td>王</td>
<td>五</td>
<td>2022-06-05</td>
</tr>
<tr>
<td>赵</td>
<td>六</td>
<td>2022-06-06</td>
</tr>
<tr>
<td>孙</td>
<td>七</td>
<td>2022-07-01</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$("#myInput").on("change", function() {
// 获取输入框的值，并转换为小写以进行不区分大小写的匹配
let searchValue = $(this).val().toLowerCase();
// 遍历表格中的每一行
$("#myTable tr").filter(function() {
// 获取当前行的所有文本内容，并转换为小写
let rowText = $(this).text().toLowerCase();
// 判断行文本是否包含搜索值
// 如果包含，则显示该行；否则隐藏
$(this).toggle(rowText.indexOf(searchValue) > -1);
});
});
});
</script>
</body>
</html>代码解析
-
HTML结构：
- input id="myInput" type="date"：这是核心的日期输入框，用户将在此选择或输入日期。
- table：包含<thead>（表头）和<tbodyyoujiankuohaophpcn（表体）。
- tbody id="myTable"：表格的主体部分，筛选操作将针对其内部的<tr>元素进行。
-
CSS样式：
- 提供了基本的表格和输入框样式，使其更具可读性。
-
JavaScript逻辑：
- $(document).ready(function(){ ... });：确保DOM完全加载后再执行脚本。
- $("#myInput").on("change", function() { ... });：这是关键部分。它监听ID为myInput的日期输入框的change事件。当用户选择或输入日期并离开输入框时，此函数将被调用。
- let searchValue = $(this).val().toLowerCase();：获取当前日期输入框的值。input type="date"的value属性通常以YYYY-MM-DD格式返回日期字符串。toLowerCase()用于确保后续匹配的不区分大小写。
- $("#myTable tr").filter(function() { ... });：选中myTable中所有的表格行（<tr>），并对每一行执行一个过滤函数。
- let rowText = $(this).text().toLowerCase();：在过滤函数内部，$(this)代表当前的<tr>元素。.text()方法获取该行中所有单元格的文本内容，并转换为小写。
- $(this).toggle(rowText.indexOf(searchValue) > -1);：这是筛选的核心逻辑。
- rowText.indexOf(searchValue) > -1：检查当前行的文本内容（rowText）是否包含搜索值（searchValue）。如果包含，indexOf将返回搜索值首次出现的索引（大于-1）；如果不包含，则返回-1。
- $(this).toggle(...)：jQuery的toggle()方法根据传入的布尔值决定元素的显示或隐藏。如果布尔值为true（即包含搜索值），则显示该行；如果为false（不包含搜索值），则隐藏该行。
注意事项
- 日期格式一致性： 本教程的筛选逻辑依赖于input type="date"输出的YYYY-MM-DD格式与表格中日期文本格式的精确匹配。如果表格中的日期格式是MM/DD/YYYY或其他形式，indexOf将无法正确匹配。在这种情况下，你需要对表格中的日期文本或搜索值进行格式转换，使其保持一致。
- 日期范围筛选： indexOf方法适用于精确匹配日期字符串。如果需要实现日期范围筛选（例如，查找某个日期区间内的记录），则需要更复杂的逻辑，包括将日期字符串解析为日期对象，然后进行日期比较。
- 性能优化： 对于包含大量行（例如数千行）的表格，每次change事件都遍历所有行可能会有性能开销。可以考虑引入去抖动（debounce）或节流（throttle）技术，限制筛选操作的频率，或使用更高效的数据结构和算法。
- 用户体验： 可以在输入框旁边添加一个清除按钮，方便用户快速清除筛选条件。
总结
通过将事件监听器从keyup切换到change，我们成功解决了input type="date"元素在日历选择后不触发筛选的问题。这个简单的改动使得表格日期筛选功能更加健壮和用户友好。掌握这种细微但关键的事件处理差异，是构建高质量前端应用的重要一步。
