如何使用jQuery实现date输入框筛选表格内的日期数据

直接把输入框type改成date后原代码失效，核心有两点：

• 原代码监听的keyup事件只会在键盘按键松开时触发，而原生date输入框的日期选择面板是点击交互，选值过程不会触发键盘事件，筛选逻辑根本不会执行
• 原逻辑是匹配整行所有单元格的文本，既不符合“仅筛选日期”的需求，还可能出现姓名文本和日期字符串巧合匹配的误判

调整两处逻辑即可实现日期筛选：

• 把输入框的监听事件换成input+change双绑定，不管是手动键盘输入日期，还是点击日期面板选值，只要输入框内容变化就触发筛选
• 把匹配范围从整行文本缩小到日期列（表格第三列），输入值为空时默认展示全部行，有筛选值时仅展示日期匹配的行

完整可运行代码 #

JavaScript 逻辑 #

$(document).ready(function(){
  // 绑定双事件兼容手动输入、点击选值两种场景
  $("#myInput").on("input change", function() {
    var filterDate = $(this).val().trim();
    $("#myTable tr").each(function() {
      // 仅读取当前行第三列（日期列）的文本做匹配
      var rowDate = $(this).find("td:eq(2)").text().trim();
      // 无筛选值时展示所有行，有值时做精准日期匹配
      $(this).toggle(filterDate === "" || rowDate === filterDate);
    });
  });
});

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;
}

HTML 结构 #

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<input id="myInput" type="date" placeholder="选择日期筛选">
<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>
  </tbody>
</table>

</body>
</html>

拓展说明：如果需要实现日期模糊匹配（比如仅选年份就匹配所有该年份的行），可以把匹配判断逻辑里的rowDate === filterDate替换为rowDate.indexOf(filterDate) > -1即可。

内容的提问来源于stack exchange，提问作者Riri