如何在表格中禁用早于浏览器当前时间的URL链接？

针对你的需求，有两种常用实现方式，分别适用于不同场景：

一、后端PHP直接处理（推荐，时间统一） #

利用服务器时间判断，在输出表格时直接决定是否渲染可点击的链接，避免前端篡改的可能。假设你的$row['Time']是HH:MM格式（如13:00），可以这样修改代码：

<?php
// 获取服务器当前时间（HH:MM格式）
$currentServerTime = date('H:i');

echo "<tr>";
echo "<td>" . $row['Location'] . "</td>";
echo "<td>" . $row['Time'] . "</td>";

// 比较时间戳：将时间字符串转为当天的时间戳进行对比
if (strtotime($row['Time']) < strtotime($currentServerTime)) {
    // 时间已过期，输出不可点击的文本（可自定义样式）
    echo "<td><span class='disabled-link'>Link</span></td>";
} else {
    // 时间未过期，输出正常链接（添加htmlspecialchars防止XSS注入）
    echo "<td><a href='". htmlspecialchars($row['URL']) ."'>Link</a></td>";
}

echo "</tr>";
?>

补充优化： #

可以定义CSS类统一禁用样式，替代内联样式：

.disabled-link {
    color: #999;
    cursor: not-allowed;
    text-decoration: none;
}

二、前端JavaScript处理（匹配浏览器本地时间） #

如果需要以用户浏览器的本地时间为判断标准，可以在页面加载后通过JS遍历表格行，动态禁用链接：

首先给表格添加一个ID方便选择：

<table id="event-table">
    <!-- 你的表格内容 -->
</table>

然后添加JS代码：

document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('event-table');
    const rows = table.querySelectorAll('tr');

    rows.forEach(row => {
        // 获取时间列（假设是第二列）
        const timeCell = row.querySelector('td:nth-child(2)');
        if (!timeCell) return;

        const rowTimeStr = timeCell.textContent.trim();
        // 解析时间为当天的时间对象
        const [hours, minutes] = rowTimeStr.split(':');
        const rowTime = new Date();
        rowTime.setHours(hours, minutes, 0, 0);

        const currentLocalTime = new Date();

        if (rowTime < currentLocalTime) {
            const link = row.querySelector('a');
            if (link) {
                // 移除链接属性并添加禁用样式
                link.removeAttribute('href');
                link.classList.add('disabled-link');
                // 额外阻止点击事件，防止残留跳转行为
                link.addEventListener('click', e => e.preventDefault());
            }
        }
    });
});

两种方式对比： #

• 后端处理：时间统一（基于服务器时间），无需依赖前端JS，适合需要严格时间标准的场景。
• 前端处理：匹配用户本地时间，适合对时间精度要求不高、需要贴合用户时区的场景。

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