jQuery表格日期筛选：实现input type="date"的动态过滤-html教程-PHP中文网

jQuery表格日期筛选：实现input type="date"的动态过滤

DDD

发布： 2025-08-16 14:48:02

原创

434人浏览过

jQuery表格日期筛选：实现input type=

本文详细介绍了如何利用jQuery实现HTML表格内容的动态过滤功能，特别针对日期类型输入框（input type="date"）的筛选需求。通过将传统的keyup事件替换为change事件，我们能确保用户通过键盘输入或日期选择器选择日期时，表格内容都能实时、准确地进行过滤，提升用户体验。

1. 基础文本过滤机制

在web开发中，为表格添加搜索过滤功能是常见的需求。使用jquery可以非常简洁地实现这一功能。其核心思路是监听输入框的keyup事件，获取用户输入的值，然后遍历表格的每一行，检查行内容是否包含该值，并根据结果显示或隐藏行。

以下是一个典型的文本过滤实现：

HTML 结构:

<html>
<head>
<title>文本过滤示例</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;
  }
</style>
</head>
<body>

<input id="myInput" type="text" placeholder="搜索文本...">
<br><br>

<table>
  <thead>
  <tr>
    <th>姓名</th>
    <th>姓氏</th>
    <th>日期</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>
  </tbody>
</table>


</body>
</html>

登录后复制

JavaScript 逻辑:

$(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事件实时响应用户输入，并将表格中不包含搜索文本的行隐藏。

2. 日期输入框的挑战与解决方案

当我们将搜索输入框的类型从type="text"改为type="date"时，原有的keyup事件监听机制可能会出现问题。input type="date"元素在用户通过键盘输入日期时仍会触发keyup事件，但当用户点击日期选择器（日历控件）选择日期时，keyup事件并不会触发，导致表格无法实时更新过滤结果。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

为了解决这个问题，我们需要将事件监听从keyup改为change。change事件在元素的值发生改变且失去焦点时触发，或者对于input type="date"，在用户通过日历选择器选择日期并确认后也会触发。这使得change事件成为监听日期输入框值变化的理想选择。

更新后的HTML结构（仅修改input类型）:

<input id="myInput" type="date" placeholder="搜索日期..">

登录后复制

更新后的JavaScript逻辑:

$(document).ready(function(){
  $("#myInput").on("change", function() { // 将 keyup 改为 change
    let value = $(this).val().toLowerCase(); // 获取输入值并转为小写
    console.log("搜索值:", value); // 用于调试，可删除
    $("#myTable tr").filter(function() {
      // 遍历表格的每一行，检查行文本是否包含输入值
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
  });
});

登录后复制

完整示例代码:

<html>
<head>
<title>日期过滤示例</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;
  }
</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>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>
  </tbody>
</table>


</body>
</html>

登录后复制

3. 注意事项

日期格式匹配： input type="date"默认输出的日期格式是YYYY-MM-DD。确保表格中存储的日期格式与此一致，否则indexOf方法可能无法正确匹配。如果格式不一致，您可能需要在过滤逻辑中添加日期格式转换步骤，例如使用JavaScript的Date对象进行解析和格式化。
性能优化： 对于包含大量行（例如数千行或更多）的表格，每次change事件都遍历所有行可能会导致性能问题。在这种情况下，可以考虑以下优化策略：
- 去抖（Debouncing）或节流（Throttling）： 限制事件处理函数的执行频率。
- 虚拟滚动（Virtual Scrolling）： 只渲染当前可见的行，减少DOM元素的数量。
- 服务器端过滤： 将过滤逻辑放到后端处理，尤其适用于数据量巨大的场景。
用户体验：
- 当用户清空日期输入框时，应显示所有表格行。当前代码在输入值为空字符串时，indexOf("")会返回0，所有行都会显示，这符合预期。
- 可以考虑添加一个清除按钮，方便用户快速清空搜索条件。

4. 总结

通过将jQuery事件监听从keyup切换到change，我们成功地解决了input type="date"在日历选择器交互下无法触发过滤的问题。这种方法确保了表格过滤功能的完整性和用户体验的流畅性。在实际应用中，根据数据规模和性能要求，可以进一步考虑日期格式化和性能优化等高级策略。

以上就是jQuery表格日期筛选：实现input type="date"的动态过滤的详细内容，更多请关注php中文网其它相关文章！