Meteor框架中如何在日期等于今日时高亮表格行？

核心思路 #

通过模板辅助函数判断每条数据的datetime是否属于今日，动态为对应表格行添加高亮样式类（或直接设置背景色）。

具体实现步骤 #

1. 添加日期判断的模板辅助函数

在你的.js文件中，为模板添加一个isToday辅助函数，用于对比日期是否为今日（仅匹配年月日，忽略时分秒）：

Template.List_matches_page.helpers({
    matches() {
        return Matches.find({}, {sort: {datetime: -1}});
    },
    // 判断日期是否为今日的辅助函数
    isToday(date) {
        const today = new Date();
        const targetDate = new Date(date);
        // 对比年、月、日是否一致
        return targetDate.getFullYear() === today.getFullYear() &&
               targetDate.getMonth() === today.getMonth() &&
               targetDate.getDate() === today.getDate();
    }
});

2. 修改HTML模板，动态绑定高亮样式

推荐使用CSS类控制高亮（比直接设置bgcolor更灵活易维护），修改你的.html代码：

{{#each match in matches}}
<tr class="center aligned {{#if isToday match.datetime}}highlight-row{{/if}}">
    <td>{{match.datetime}}</td>
</tr>
{{/each}}

3. 定义高亮样式

在项目的CSS文件中添加高亮行的样式（可根据需求自定义颜色）：

.highlight-row {
    background-color: #ffeb3b; /* 黄色高亮，示例颜色 */
}

备选方案：直接设置背景色 #

如果不想额外定义CSS类，也可以直接在模板中动态设置bgcolor属性：

{{#each match in matches}}
<tr class="center aligned" bgcolor="{{#if isToday match.datetime}}red{{else}}transparent{{/if}}">
    <td>{{match.datetime}}</td>
</tr>
{{/each}}

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