求助：JavaScript基于已有表格生成调度器主表格无显示

我帮你梳理下代码里的几个关键问题，这些问题直接导致了主表格无法正常显示：

1. 变量初始化错误 #

你在声明drawTable时直接用了+=赋值，但这个变量还没有被初始化，JS会抛出ReferenceError——因为drawTable此时是undefined，无法执行加法赋值操作。

修复方式：先将变量初始化为空字符串：

var drawTable = '';

2. 错误使用int关键字 #

JS是弱类型语言，声明循环变量时不需要用int（这是Java/C#这类强类型语言的写法），直接用let或var即可，否则会抛出SyntaxError中断代码执行。

修复方式：把循环里的int替换成let（推荐用let，块级作用域更安全）：

for (let i = 0; i < employeeCount; i++) {
    drawTable += '<tr>';
    for(let j = 0; j < dayCount; j++) {
        drawTable += '<td>Task</td>';
    }
    drawTable += '</tr>';
}

3. 行列逻辑搞反 #

你的变量命名和实际业务逻辑不匹配：

• 你定义的rows实际是dayRow里的td数量（也就是天数，对应表格的列数）
• 你定义的cols实际是employeeCol里的tr数量（也就是员工数，对应表格的行数）

如果按原逻辑循环，生成的表格会是「天数行 × 员工列」，这和调度器的需求（员工行 × 天数列）完全相反，所以需要调整循环顺序：外层遍历员工数（生成行），内层遍历天数（生成列）。

4. 不推荐使用document.write #

document.write在页面加载完成后调用会清空整个页面，即使当前是在页面加载时执行，也不如直接操作DOM容器更安全可控。我们应该获取table-scroll-schedular这个容器，把生成的表格HTML赋值给它的innerHTML。

修复方式：替换document.write(drawTable)为：

document.getElementById('table-scroll-schedular').innerHTML = drawTable;

修改后的完整JavaScript代码 #

function createMainTable() {
    // 重新命名变量，让逻辑更清晰：天数对应列数，员工数对应行数
    const dayCount = document.getElementById('dayRow').getElementsByTagName("td").length;
    const employeeCount = document.getElementById('employeeCol').getElementsByTagName("tr").length;
    
    let drawTable = '<table class="tableTasks">';
    // 外层循环：生成员工行
    for (let i = 0; i < employeeCount; i++) {
        drawTable += '<tr>';
        // 内层循环：生成天数列
        for(let j = 0; j < dayCount; j++) {
            drawTable += '<td>Task</td>';
        }
        drawTable += '</tr>';
    }
    drawTable += '</table>';
    
    // 将生成的表格插入到指定容器中
    document.getElementById('table-scroll-schedular').innerHTML = drawTable;
}

额外的HTML小问题 #

你的employeeCol表格标签里多了一个逗号：<table id="employeeCol", class="tableEmployees">，虽然浏览器可能会忽略，但最好去掉，写成<table id="employeeCol" class="tableEmployees">，避免潜在的解析问题。

现在运行修改后的代码，主调度表格应该就能正常显示了——每个员工对应一行，每天对应一列，单元格里默认显示"Task"。

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