引言
在web应用开发中，表格数据展示和筛选是常见需求。当表格中包含日期信息时，用户往往希望能够通过日期输入框进行快速筛选。jquery提供了一种简洁高效的方式来实现这一功能。然而，对于html5的元素，其行为与普通文本输入框有所不同，这要求我们在事件监听上做出相应的调整，以确保筛选逻辑能够正确触发。
理解问题：input type="date"与事件监听
传统的文本输入框（）通常通过监听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)
});
});
});这段代码对于文本输入框非常有效，它会实时根据用户键入的字符筛选表格行。然而，当我们将输入框类型改为时，问题就出现了。元素在用户通过日历选择器选择日期时，并不会触发keyup事件，因为用户并没有“键入”字符。因此，如果继续使用keyup事件，当用户通过日历选择日期后，筛选功能将不会被激活，导致用户体验不佳。
解决方案：利用change事件进行日期筛选
解决input type="date"筛选问题的关键在于选择正确的事件监听器。change事件会在元素的值发生改变并且失去焦点时触发。对于，这意味着当用户通过日历选择了一个日期并关闭日历选择器，或者手动输入日期并离开输入框时，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事件实现表格日期筛选功能：
jQuery表格日期筛选
| 姓名 | 姓氏 | 日期 |
|---|---|---|
| 张 | 三 | 2022-06-03 |
| 李 | 四 | 2022-06-04 |
| 王 | 五 | 2022-06-05 |
| 赵 | 六 | 2022-06-06 |
| 孙 | 七 | 2022-07-01 |
代码解析
-
HTML结构：
- input id="myInput" type="date"：这是核心的日期输入框，用户将在此选择或输入日期。
- table：包含（表头）和
（表体）。
- tbody id="myTable"：表格的主体部分，筛选操作将针对其内部的
元素进行。 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中所有的表格行（
），并对每一行执行一个过滤函数。 - let rowText = $(this).text().toLowerCase();：在过滤函数内部，$(this)代表当前的
元素。.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"元素在日历选择后不触发筛选的问题。这个简单的改动使得表格日期筛选功能更加健壮和用户友好。掌握这种细微但关键的事件处理差异，是构建高质量前端应用的重要一步。
- let rowText = $(this).text().toLowerCase();：在过滤函数内部，$(this)代表当前的
- tbody id="myTable"：表格的主体部分，筛选操作将针对其内部的
