如何用无依赖内联Javascript离线实现HTML表格日期对比并高亮目标行？

不需要懂正则，直接用下面的内联JavaScript代码就能实现需求——自动识别表格里table-date_two单元格日期晚于table-date_one的行，并给这些行加上高亮样式，离线浏览器打开就能用。

完整实现代码 #

把这段代码插入到你的HTML文件中，放在</body>标签之前（或者直接放在表格的后面）：

<style>
/* 自定义高亮样式，可修改颜色 */
.highlight-row {
    background-color: #ffeeee !important; /* 浅红色背景，替换成你需要的颜色 */
}
</style>

<script>
// 获取目标表格的所有行
const rows = document.querySelectorAll('table.stuff tbody tr');

// 遍历每一行进行判断
rows.forEach(row => {
    // 获取当前行的两个日期单元格
    const dateOneEl = row.querySelector('.table-date_one');
    const dateTwoEl = row.querySelector('.table-date_two');
    
    // 确保两个日期单元格都存在
    if (dateOneEl && dateTwoEl) {
        // 将日期文本转为可比较的Date对象
        const date1 = new Date(dateOneEl.textContent.trim());
        const date2 = new Date(dateTwoEl.textContent.trim());
        
        // 如果第二个日期晚于第一个，添加高亮样式
        if (date2 > date1) {
            row.classList.add('highlight-row');
        }
    }
});
</script>

简单说明 #

1. 适配你的表格：如果你的表格class不是stuff，把代码里的table.stuff改成你实际的表格class
2. 修改高亮样式：调整style里的background-color值，换成你喜欢的高亮颜色
3. 离线可用：这段代码完全在浏览器本地运行，不需要联网
4. 日期兼容性：JavaScript的new Date()可以直接识别你示例中的日期格式（比如4 May 2023, 12:52 am），不用额外处理

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