如何通过jQuery批量修改指定data-date范围元素的CSS样式？

当然可以呀！你现在逐个指定日期的方式太繁琐了，完全可以通过jQuery的筛选功能来批量处理这个日期范围的需求，不用再重复写一堆相似的选择器啦。

实现思路 #

核心是把日期转换成可直接比较的时间戳，然后通过filter()方法筛选出符合范围的元素，再统一设置样式。

完整代码示例 #

jQuery(document).ready(function() {
    // 保留你原本的表格克隆逻辑
    jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');

    // 定义目标日期范围，转换为时间戳（方便数值比较）
    const startTimestamp = new Date("2018-04-03").getTime();
    const endTimestamp = new Date("2018-04-06").getTime();

    // 筛选符合条件的td元素并设置样式
    $("td[data-row='2']").filter(function() {
        // 获取当前元素的data-date值并转换为时间戳
        const currentTimestamp = new Date($(this).data('date')).getTime();
        // 判断是否在目标日期范围内
        return currentTimestamp >= startTimestamp && currentTimestamp <= endTimestamp;
    }).css({
        "background": "lightblue",
        "border-right-color": "lightblue"
    });
});

代码说明 #

• 时间戳转换：把日期字符串转换成时间戳（毫秒数），这样可以直接用大于/小于号做范围判断，比字符串对比更可靠；
• filter()方法：遍历所有data-row='2'的td元素，只保留符合日期范围的元素；
• 批量样式设置：所有符合条件的元素会被一次性选中，然后统一应用样式，效率更高也更易维护。

如果你的需求是给**整行（tr）**设置样式，只需要把选择器改成$("tr[data-date]")，然后调整内部的日期获取逻辑即可，思路是完全一致的。

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