无需Datatables插件实现员工表日期范围过滤的技术咨询

我来帮你搞定这个表格日期过滤的需求，结合你给出的HTML结构，我整理了一套完整的实现方案，包含HTML的优化调整和对应的JavaScript逻辑：

第一步：优化HTML结构（可选但推荐） #

首先把日期输入框的类型改成type="date"，这样用户可以通过日期选择器来选择日期，避免手动输入格式不一致的问题，同时我们也能更轻松地解析日期：

<div class="filters">
  <input type="date" name="hireDate" id="hireDate" placeholder="选择雇佣日期">
  <input type="date" name="terminationDate" id="terminationDate" placeholder="选择终止日期">
</div>
<table id="exampleTable">
  <thead>
    <tr>
      <th>Employee Name</th>
      <th>Hire Date</th>
      <th>Termination Date</th>
      <th>Designation</th>
      <th>Hire Date epoch</th>
      <th>Termination Date epoch</th>
    </tr>
  </thead>
  <tbody>
    <!-- 示例数据，你可以替换成真实数据 -->
    <tr>
      <td>John Doe</td>
      <td>2016-01-05</td>
      <td>2016-01-25</td>
      <td>Developer</td>
      <td>1451913600000</td>
      <td>1453641600000</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>2015-12-20</td>
      <td>2016-02-10</td>
      <td>Designer</td>
      <td>1450569600000</td>
      <td>1455052800000</td>
    </tr>
  </tbody>
</table>

第二步：编写过滤逻辑的JavaScript代码 #

下面的代码会监听日期输入框的变化，实时根据你的三个规则过滤表格行：

// 获取DOM元素
const hireDateInput = document.getElementById('hireDate');
const terminationDateInput = document.getElementById('terminationDate');
const tableBody = document.querySelector('#exampleTable tbody');

// 定义过滤函数
function filterTable() {
  // 获取用户输入的日期并转换为时间戳（毫秒级）
  const selectedHireDate = hireDateInput.value ? new Date(hireDateInput.value).getTime() : null;
  const selectedTerminationDate = terminationDateInput.value ? new Date(terminationDateInput.value).getTime() : null;

  // 遍历表格每一行
  const rows = tableBody.querySelectorAll('tr');
  rows.forEach(row => {
    // 获取当前行的雇佣/终止日期时间戳
    const rowHireEpoch = parseInt(row.cells[4].textContent.trim());
    const rowTerminationEpoch = parseInt(row.cells[5].textContent.trim());

    let shouldShow = true;

    // 根据三个规则判断是否显示当前行
    if (selectedHireDate && selectedTerminationDate) {
      // 规则1：两个日期都选了，同时满足雇佣日期>=所选，终止日期<=所选
      shouldShow = rowHireEpoch >= selectedHireDate && rowTerminationEpoch <= selectedTerminationDate;
    } else if (selectedHireDate) {
      // 规则2：只选了雇佣日期，显示雇佣日期>=所选的行
      shouldShow = rowHireEpoch >= selectedHireDate;
    } else if (selectedTerminationDate) {
      // 规则3：只选了终止日期，显示终止日期<=所选的行
      shouldShow = rowTerminationEpoch <= selectedTerminationDate;
    }

    // 控制行的显示/隐藏
    row.style.display = shouldShow ? '' : 'none';
  });
}

// 绑定事件：当输入框内容变化时触发过滤
hireDateInput.addEventListener('change', filterTable);
terminationDateInput.addEventListener('change', filterTable);

逻辑解释 #

• 日期转换：我们把用户选择的日期转换成毫秒级时间戳，和表格里的Hire Date epoch、Termination Date epoch直接对比，避免了不同日期格式解析的麻烦。
• 规则判断：依次检查用户是否输入了一个或两个日期，然后对应不同的过滤条件，决定是否显示当前行。
• 实时过滤：通过监听输入框的change事件，用户每次选择日期后都会自动触发过滤，无需额外点击按钮。

如果你坚持要使用type="text"的输入框，只需要稍微调整日期解析的部分，适配你需求里的dd-mmm-yyyy格式：

// 解析dd-mmm-yyyy格式的日期为时间戳
function parseCustomDate(dateStr) {
  const parts = dateStr.split('-');
  const monthMap = {
    'jan': 0, 'feb': 1, 'mar': 2, 'apr': 3,
    'may': 4, 'jun': 5, 'jul': 6, 'aug': 7,
    'sep': 8, 'oct': 9, 'nov': 10, 'dec': 11
  };
  return new Date(parts[2], monthMap[parts[1].toLowerCase()], parts[0]).getTime();
}

// 然后在filterTable里替换日期转换部分：
const selectedHireDate = hireDateInput.value ? parseCustomDate(hireDateInput.value) : null;
const selectedTerminationDate = terminationDateInput.value ? parseCustomDate(terminationDateInput.value) : null;

这样就能完美适配你需求里的日期格式啦！

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