由JQuery生成的HTML表在IE9中不起作用

Question

嘿，这个问题很麻烦。由jQuery生成的表在我需要支持的所有浏览器中都能正常工作，除了IE9。该表应该看起来像

但在IE9中显示如下

这些课程术语被渲染为一个巨大的文本而不是单独的tds。

应该是这样的：

以下是生成表格的代码。

    tempDiv = document.createElement("div");
    tempDiv.id = "courseAvailabilityTitle";

    var availabilityLabel = $('#availabilityLabel').val();

    if(availabilityLabel != null){
        tempDiv.innerHTML = availabilityLabel;
    }
    else{
        tempDiv.innerHTML = "Course Availability";
    }
    bodyDiv.appendChild(tempDiv);

    // Course Availability Table
    tempDiv = document.createElement("div");
    tempDiv.id = "courseAvailability";
    html = "<table align=\"center\" cellspacing=\"0\" cellpadding=\"3\" border=\"0\">";
    html += "<tr id=termAvailability>";

        for ( var i = 0; i < courseDesc.termHeaders.length; i += 1) {
            html += "<td class=\"availabilityTerms\">"
                    + courseDesc.termHeaders[i] + "</td>";
        }

    html += "</tr><tr id=\"termsRow\">";

    for ( var i = 0; i < courseDesc.availability.length; i += 1) {
        html += "<td class=\"availabilityBox\">&nbsp;</td>";
    }

我在想这个问题可能在html + =中。我尝试用.append替换它，但无法使其正常工作。任何帮助或想法将不胜感激，这一直在疯狂。谢谢！

Answer 1

This JSFiddle should work.

以下是我在开发工具中看到的内容（IE10，在IE9标准模式下）：

我无法重现您的确切问题，但我发现中间的appendChild()语句对我造成了一些不良输出，例如： "undefined"或"[Object object]"。我将附加移动到最后，似乎工作正常。

document.getElementById('bodyDiv').appendChild(tempDiv);

如果这没有帮助，可以尝试在添加行之前显式添加tbody。