如何创建顶部带日期选择器的按天筛选表格

下面是一个纯前端的实现方案，用HTML+JavaScript就能搞定，数据如果是后端返回的，替换成接口请求结果即可：

1. 完整实现代码 #

<!-- 日期筛选器区域 -->
<div style="margin-bottom: 16px;">
  <label for="dateFilter">选择日期：</label>
  <input type="date" id="dateFilter">
</div>

<!-- 数据表格 -->
<table border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>时间</th>
      <th>事件</th>
      <th>数值</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <!-- 数据将通过JS动态渲染 -->
  </tbody>
</table>

<script>
// 模拟原始业务数据，实际项目替换为后端接口返回数据
const rawData = [
  { date: '2024-05-20', time: '09:15', event: '用户登录', value: 120 },
  { date: '2024-05-20', time: '10:30', event: '下单成功', value: 35 },
  { date: '2024-05-21', time: '08:45', event: '用户注册', value: 89 },
  { date: '2024-05-21', time: '14:20', event: '退款申请', value: 12 },
  { date: '2024-05-22', time: '11:00', event: '用户登录', value: 156 }
];

// 初始化表格，默认显示全部数据
renderTable(rawData);

// 监听日期选择器的切换事件
document.getElementById('dateFilter').addEventListener('change', function(e) {
  const selectedDate = e.target.value;
  if (!selectedDate) {
    // 未选择日期时恢复显示全部数据
    renderTable(rawData);
    return;
  }
  // 筛选出选中日期的对应数据
  const filteredData = rawData.filter(item => item.date === selectedDate);
  renderTable(filteredData);
});

// 表格渲染核心函数
function renderTable(data) {
  const tableBody = document.getElementById('tableBody');
  // 清空现有表格内容，避免数据残留
  tableBody.innerHTML = '';
  
  if (data.length === 0) {
    // 无数据时显示提示
    const emptyRow = document.createElement('tr');
    emptyRow.innerHTML = `<td colspan="3">当日无数据</td>`;
    tableBody.appendChild(emptyRow);
    return;
  }
  
  // 遍历数据生成表格行
  data.forEach(item => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${item.time}</td>
      <td>${item.event}</td>
      <td>${item.value}</td>
    `;
    tableBody.appendChild(row);
  });
}
</script>

2. 关键细节说明 #

• 日期格式匹配：input[type="date"]返回的日期格式是YYYY-MM-DD，所以你的原始数据日期字段必须和这个格式完全一致，否则筛选会失效。如果格式不统一，可通过Date对象转换为标准格式。
• 空状态处理：选中日期无对应数据时，会显示友好提示，避免表格空白造成困惑。
• 动态渲染逻辑：每次筛选都会清空旧数据再重新渲染，保证数据准确性。

3. 实用扩展建议 #

可以给日期选择器默认选中当天，提升用户操作效率：

// 页面加载时自动选中当天
const today = new Date().toISOString().split('T')[0];
document.getElementById('dateFilter').value = today;
// 初始化时直接筛选并显示当天数据
renderTable(rawData.filter(item => item.date === today));

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