如何根据下拉列表的用户选择动态填充员工DTR表格？

嘿，针对你这个员工DTR表格的时间段筛选需求，我给你整理了一套简单易实现的方案，直接就能上手用！

先看看你提到的员工DTR表格：

1. 搭建HTML基础结构 #

首先在表格上方加个下拉选择框，同时给表格的每一行标记好对应的时间段（用data-*属性，方便后续JS识别）：

<!-- 时间段筛选下拉框 -->
<label for="timeRange">选择时间段：</label>
<select id="timeRange">
  <option value="all">全部时间段</option>
  <option value="2018-03-01至2018-03-16">2018年3月1日-16日</option>
  <option value="2018-03-17至2018-03-31">2018年3月17日-31日</option>
  <!-- 按需添加更多时间段选项 -->
</select>

<!-- 员工DTR表格 -->
<table id="dtrTable" border="1">
  <thead>
    <tr>
      <th>员工姓名</th>
      <th>日期</th>
      <th>上班时间</th>
      <th>下班时间</th>
      <!-- 其他列根据你的实际表格调整 -->
    </tr>
  </thead>
  <tbody>
    <!-- 给每行加上对应时间段的data属性 -->
    <tr data-time-range="2018-03-01至2018-03-16">
      <td>张三</td>
      <td>2018-03-05</td>
      <td>09:00</td>
      <td>18:00</td>
    </tr>
    <tr data-time-range="2018-03-01至2018-03-16">
      <td>李四</td>
      <td>2018-03-10</td>
      <td>08:30</td>
      <td>17:30</td>
    </tr>
    <tr data-time-range="2018-03-17至2018-03-31">
      <td>王五</td>
      <td>2018-03-20</td>
      <td>09:00</td>
      <td>18:00</td>
    </tr>
  </tbody>
</table>

2. 编写JavaScript筛选逻辑 #

接下来加一段JS代码，监听下拉框的选择变化，自动隐藏/显示对应时间段的表格行：

// 获取页面元素
const timeSelector = document.getElementById('timeRange');
const tableRows = document.querySelectorAll('#dtrTable tbody tr');

// 监听下拉框选择事件
timeSelector.addEventListener('change', function() {
  const selectedRange = this.value;
  
  tableRows.forEach(row => {
    // 选择"全部"就显示所有行，否则只显示匹配时间段的行
    if (selectedRange === 'all' || row.dataset.timeRange === selectedRange) {
      row.style.display = '';
    } else {
      row.style.display = 'none';
    }
  });
});

3. 灵活扩展建议 #

• 如果你的时间段是从后端动态获取的，可以用JS循环生成下拉选项和表格行的data-time-range属性。
• 如果需要支持自定义日期范围（不是预定义的时间段），可以把下拉框换成日期范围选择器，然后通过比较每行的日期值来筛选，逻辑和上面类似。

这样设置好之后，只要选择对应的时间段，表格就会自动只展示该时段的员工DTR数据啦！

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