如何基于选定日期范围为团队排班表单元格设置颜色？

需求说明 #

为6名团队成员制作2023年4月排班表，表格为6行31列。需实现：输入日期范围和班次名称后，为表格内对应日期范围的单元格着色（例如选择2023年4月1日至4月5日、晚班时，表格第1-5列的单元格需要着色）。

设计参考 #

解决方案及修改后代码 #

要实现该功能，需将表格固定为6行31列，再根据选定日期范围计算对应列索引，为目标单元格设置背景色。以下是修改后的完整代码：

function addTable() {
    var myTableDiv = document.getElementById("ShiftTableContainer");
    // 获取传入的日期范围与班次参数
    const startDate = new Date($parameters.StartDate);
    const endDate = new Date($parameters.EndDate);
    const selectedShift = $parameters.ShiftName; // 示例值："晚班"

    // 提取日期对应的4月日期序号（1-31）
    const startDay = startDate.getDate();
    const endDay = endDate.getDate();

    // 创建表格元素
    var table = document.createElement('TABLE');
    table.border = '1';
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);

    // 生成6行（对应6名团队成员）
    for (var row = 1; row <= 6; row++) {
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);
        // 生成31列（对应4月的31天）
        for (var col = 1; col <= 31; col++) {
            var td = document.createElement('TD');
            td.width = '75';
            td.textContent = `成员${row}，${col}日`;
            tr.appendChild(td);

            // 判断当前单元格是否满足着色条件
            if (col >= startDay && col <= endDay && selectedShift === "晚班") {
                td.style.backgroundColor = "#ffcccc"; // 可根据需求替换颜色值
            }
        }
    }
    myTableDiv.appendChild(table);
}

// 调用生成表格
addTable();

关键逻辑说明 #

1. 固定表格结构：循环生成6行31列，直接对应6名成员和4月的全部日期，不再依赖日期差动态生成列数。
2. 日期转列索引：通过getDate()方法获取选定日期在4月的序号（1-31），直接映射为表格的列序号。
3. 条件着色：遍历单元格时，判断其列索引是否在目标日期范围内且匹配选定班次，满足条件则设置背景色。若班次对应特定成员行（如某几行专属晚班），可在判断中加入行号条件（例如row >= 2 && row <= 4）。

扩展提示 #

• 可将不同班次的颜色值封装为变量，方便统一调整配色方案。
• 若需支持动态切换日期/班次，可将着色逻辑拆分为独立函数，参数变化时直接调用函数更新单元格样式，无需重新生成整个表格。

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