JavaScript日期对比：HTML表格日期距今日小于10天标红代码不生效问题

问题排查 #

你现有代码的问题集中在3处：

• 选择器匹配错误：HTML中包裹表格的元素是id="employee_table"，JS中用了类选择器.employee_table，无法命中对应元素
• 日期解析兼容性问题：表格输出的日期格式为日-月-年（d-m-Y），浏览器Date.parse()对该格式的解析支持度极低，多数场景会返回NaN，无法进行对比
• 格式统一逻辑冗余：日期对比直接用时间戳（毫秒数）即可，不需要额外转成字符串格式做匹配

修复方案 #

方案1（更稳妥，推荐）：PHP端提前注入标准时间戳，避免前端解析错误 #

修改PHP渲染表格的部分，给每个日期单元格加data-timestamp属性存储Unix时间戳：

<div id="employee_table">  
  <table class="sortable table table-bordered">  
    <tr>  
      <th width="10%">date1</th>  
      <th width="10%">date2</th>  
      <th width="10%">date3</th>
      <th width="10%">date4</th>                                      
    </tr>  
    <?php  
    while($row = mysqli_fetch_array($result))  
    {  
    ?>  
    <tr>  
      <td data-timestamp="<?php echo strtotime($row["date1"])?>"><?php echo date('d-m-Y', strtotime($row["date1"])) ?></td> 
      <td data-timestamp="<?php echo strtotime($row["date2"])?>"><?php echo date('d-m-Y', strtotime($row["date2"])) ?></td> 
      <td data-timestamp="<?php echo strtotime($row["date3"])?>"><?php echo date('d-m-Y', strtotime($row["date3"])) ?></td> 
      <td data-timestamp="<?php echo strtotime($row["date4"])?>"><?php echo date('d-m-Y', strtotime($row["date4"])) ?></td>                                        
    </tr>  
    <?php  
    }  
    ?>  
  </table>
</div>

对应的JS修改为：

<script>
// 计算10天前的时间戳（毫秒级，PHP时间戳是秒级所以要*1000）
const tenDaysAgo = Date.now() - 10 * 24 * 60 * 60 * 1000;
// 用id选择器命中表格容器
$("#employee_table").find('td').each(function() {
  // 读取data属性里的时间戳，转成毫秒级
  const cellTimestamp = $(this).data('timestamp') * 1000;
  // 单元格日期大于10天前的时间戳，说明距今日不足10天，标红
  if (cellTimestamp > tenDaysAgo) {
    $(this).css('background-color', '#CF202A');
  }
});
</script>

方案2（纯前端修复，不需要改PHP）：JS手动解析d-m-Y格式的日期 #

如果不方便修改PHP代码，可以直接在JS层手动拆分日期字符串后构造时间对象，避免Date.parse()的兼容问题：

<script>
const tenDaysAgo = Date.now() - 10 * 24 * 60 * 60 * 1000;
$("#employee_table").find('td').each(function() {
  const dateStr = $(this).text().trim();
  // 拆分日、月、年
  const [day, month, year] = dateStr.split('-');
  // 构造日期对象，注意月份是0起始，所以要减1
  const cellDate = new Date(year, parseInt(month) - 1, day);
  const cellTimestamp = cellDate.getTime();
  if (cellTimestamp > tenDaysAgo) {
    $(this).css('background-color', '#CF202A');
  }
});
</script>

格式统一说明 #

所有日期对比统一转成毫秒级时间戳即可保证准确性，不需要处理字符串格式的匹配，完全避免不同地区、不同浏览器的日期解析差异。

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