如何用PHP或JS根据日期更改客户生日TD的字体颜色？

PHP 服务器端实现 #

问题分析 #

你之前的PHP函数存在几个关键问题：

• 错误依赖$_POST参数，但表格渲染是服务器端循环过程，应直接在循环内处理每个客户的生日数据
• date_format调用方式错误，需先将日期字符串转为DateTime对象再调用方法
• 没有将高亮逻辑整合到表格的<td>渲染流程中

实现代码 #

根据需求，分两种匹配场景：

场景1：匹配完整日期（含年份，仅生日当天高亮）

<?php
// 获取目标日期：优先使用日历传入的日期，否则用当前日期
$targetDate = isset($_REQUEST['calendrier']) ? new DateTime($_REQUEST['calendrier']) : new DateTime();
$targetDateStr = $targetDate->format('Y-m-d');
?>

<?php foreach ($rows as $row) : ?>
  <tr id_client="<?php echo $row["id_client"]; ?>">
    <td><?php echo $row["id_client"]; ?></td>
    <?php
    $birthDate = new DateTime($row["client_birth_date"]);
    $birthDateStr = $birthDate->format('Y-m-d');
    $isBirthday = ($birthDateStr === $targetDateStr);
    ?>
    <td <?php echo $isBirthday ? 'style="color: #FF0000;"' : ''; ?>>
      <?php echo $row["client_birth_date"]; ?>
    </td>
  </tr>
<?php endforeach; ?>

场景2：匹配月日（每年生日都高亮，忽略年份）

只需修改日期匹配的格式：

<?php
$targetDate = isset($_REQUEST['calendrier']) ? new DateTime($_REQUEST['calendrier']) : new DateTime();
$targetMonthDay = $targetDate->format('m-d'); // 仅保留月日
?>

<?php foreach ($rows as $row) : ?>
  <tr id_client="<?php echo $row["id_client"]; ?>">
    <td><?php echo $row["id_client"]; ?></td>
    <?php
    $birthDate = new DateTime($row["client_birth_date"]);
    $birthMonthDay = $birthDate->format('m-d');
    $isBirthday = ($birthMonthDay === $targetMonthDay);
    ?>
    <td <?php echo $isBirthday ? 'style="color: #FF0000;"' : ''; ?>>
      <?php echo $row["client_birth_date"]; ?>
    </td>
  </tr>
<?php endforeach; ?>

JavaScript 前端动态实现（支持日历交互） #

核心思路 #

通过给生日单元格添加自定义data-birth-date属性，精准存储日期值，避免解析文本内容的误差，同时实现页面加载自动高亮和日历输入实时更新的功能。

步骤1：修改PHP渲染代码，添加自定义属性 #

<?php foreach ($rows as $row) : ?>
  <tr id_client="<?php echo $row["id_client"]; ?>">
    <td><?php echo $row["id_client"]; ?></td>
    <!-- 添加data-birth-date属性存储原始日期 -->
    <td data-birth-date="<?php echo $row["client_birth_date"]; ?>">
      <?php echo $row["client_birth_date"]; ?>
    </td>
  </tr>
<?php endforeach; ?>

步骤2：编写JavaScript逻辑 #

// 通用高亮函数：传入目标日期（Y-m-d格式），匹配并高亮对应单元格
function highlightBirthdays(targetDateStr) {
  // 清除之前的高亮样式
  document.querySelectorAll('td[data-birth-date]').forEach(td => {
    td.style.color = '';
  });

  // 遍历所有生日单元格，匹配后高亮
  document.querySelectorAll('td[data-birth-date]').forEach(td => {
    const birthDateStr = td.dataset.birthDate;
    
    // 场景1：匹配完整日期（含年份）
    if (birthDateStr === targetDateStr) {
      td.style.color = '#FF0000';
    }

    // 场景2：匹配月日（每年生日高亮），替换上面的判断为以下代码
    // const birthDate = new Date(birthDateStr);
    // const targetDate = new Date(targetDateStr);
    // if (birthDate.getMonth() === targetDate.getMonth() && birthDate.getDate() === targetDate.getDate()) {
    //   td.style.color = '#FF0000';
    // }
  });
}

// 页面加载完成后，用当前日期初始化高亮
document.addEventListener('DOMContentLoaded', () => {
  const today = new Date();
  // 格式化为Y-m-d，与PHP输出的日期格式统一
  const todayStr = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
  highlightBirthdays(todayStr);
});

// 监听日历输入框变化（假设输入框id为"calendrier"）
const calendarInput = document.getElementById('calendrier');
if (calendarInput) {
  calendarInput.addEventListener('change', (e) => {
    const selectedDate = e.target.value; // 确保输入框返回Y-m-d格式字符串
    highlightBirthdays(selectedDate);
  });
}

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