jQuery表格日期筛选：优化input type="date"的搜索体验-小浪学习网

jQuery表格日期筛选：优化input type="date"的搜索体验

本教程详细介绍了如何利用jquery实现html表格数据的日期筛选功能。针对input type=”date”类型输入框的特性，文章重点阐述了为何应使用change事件而非keyup事件来触发筛选逻辑，并提供了完整的HTML、css和JavaScript代码示例，帮助开发者构建响应式、用户友好的日期搜索界面。

引言

在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事件实现表格日期筛选功能：

<!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：包含（表头）和（表体）。
- 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（不包含搜索值），则隐藏该行。