What is it about this source code that causes it to actually generate a table in IE instead of just doing nothing.

        function generateATable()
        {
            tableContainer = document.getElementById("tableDiv");
            var tableElement = document.createElement("table");

            // Append the Table Element to the table 
            // container.
            tableContainer.appendChild(tableElement);

            // IE Requires a TBODY when dynamically generating 
            // tables.  (I thought this was it but apparently it isn't)
            var tbodyElement = document.createElement("tbody");

            // First we'll append the tbody.
            tableElement.appendChild(tbodyElement);

            var trElement1 = document.createElement("tr");

            // Next we'll append the first trElement to the 
            // tbody.
            tbodyElement.appendChild(trElement1);

            var aaCell = trElement1.insertCell(-1);
            var abCell = trElement1.insertCell(0);

            var textNodeAA = document.createTextNode("AA");
            var textNodeAB = document.createTextNode("AB");

            aaCell.appendChild(textNodeAA);
            abCell.appendChild(textNodeAB);

            tbodyElement.appendChild(trElement1);

            var baCell = trElement1.cells[0].cloneNode(false);
            var bbCell = trElement1.cells[1].cloneNode(false);

            var textNodeBA = document.createTextNode("BA");
            var textNodeBB = document.createTextNode("BB");

            trElement2 = trElement1.cloneNode(false);

            tbodyElement.appendChild(trElement2);

            baCell.appendChild(textNodeBA);
            bbCell.appendChild(textNodeBB);

            trElement2.appendChild(baCell);
            trElement2.appendChild(bbCell);

            tableElement.style.border="4px solid black";

        }

My apologies...it's a problem with something else...the data that was creating the table wasn't filling in, votes back up for everyone...sorry!...

What is it about this source code that causes it to actually generate a table in IE instead of just doing nothing.

        function generateATable()
        {
            tableContainer = document.getElementById("tableDiv");
            var tableElement = document.createElement("table");

            // Append the Table Element to the table 
            // container.
            tableContainer.appendChild(tableElement);

            // IE Requires a TBODY when dynamically generating 
            // tables.  (I thought this was it but apparently it isn't)
            var tbodyElement = document.createElement("tbody");

            // First we'll append the tbody.
            tableElement.appendChild(tbodyElement);

            var trElement1 = document.createElement("tr");

            // Next we'll append the first trElement to the 
            // tbody.
            tbodyElement.appendChild(trElement1);

            var aaCell = trElement1.insertCell(-1);
            var abCell = trElement1.insertCell(0);

            var textNodeAA = document.createTextNode("AA");
            var textNodeAB = document.createTextNode("AB");

            aaCell.appendChild(textNodeAA);
            abCell.appendChild(textNodeAB);

            tbodyElement.appendChild(trElement1);

            var baCell = trElement1.cells[0].cloneNode(false);
            var bbCell = trElement1.cells[1].cloneNode(false);

            var textNodeBA = document.createTextNode("BA");
            var textNodeBB = document.createTextNode("BB");

            trElement2 = trElement1.cloneNode(false);

            tbodyElement.appendChild(trElement2);

            baCell.appendChild(textNodeBA);
            bbCell.appendChild(textNodeBB);

            trElement2.appendChild(baCell);
            trElement2.appendChild(bbCell);

            tableElement.style.border="4px solid black";

        }

My apologies...it's a problem with something else...the data that was creating the table wasn't filling in, votes back up for everyone...sorry!...

• javascript
• internet-explorer
• html-table

4 Answers 4

                    tableContainer = document.getElementById("tableDiv");
                    var tableElement = document.createElement("table");

                    // Append the Table Element to the table 
                    // container.
                    tableContainer.appendChild(tableElement);

That's about it. The rest is actually populating the table.

We find a div in the existing HTML document called "tableDiv", and then we create a <table> element, and add it to tableDiv.

Creating a table which can be seen on the page consists of two steps — creating the table node:

var tableElement = document.createElement("table");

…and adding it as the child of a node which is in the document:

tableContainer = document.getElementById("tableDiv");
tableContainer.appendChild(tableElement);

document.createElement("table")
  ...
tableContainer.appendChild(tableElement);

That adds a element to the DOM.

I'm not sure why you're downvoting everyone who has answered correctly. Do you want a line-by-line description of what the code is doing?

function generateATable() {
    /* obtain a reference to a div */
    tableContainer = document.getElementById("tableDiv");
    /* create a table element */
    var tableElement = document.createElement("table");

    // Append the Table Element to the table 
    // container.
    /* append the table element to the div */
    tableContainer.appendChild(tableElement);

    // IE Requires a TBODY when dynamically generating 
    // tables.  (I thought this was it but apparently it isn't)
    /* create a tbody element */
    var tbodyElement = document.createElement("tbody");

    // First we'll append the tbody.
    /* append the tbody element to the table element */
    tableElement.appendChild(tbodyElement);

    /* create a row element */
    var trElement1 = document.createElement("tr");

    // Next we'll append the first trElement to the 
    // tbody.
    /* append the row element to the tbody element */
    tbodyElement.appendChild(trElement1);

    /* insert two cells */
    var aaCell = trElement1.insertCell(-1);
    var abCell = trElement1.insertCell(0);

    /* create two text nodes */
    var textNodeAA = document.createTextNode("AA");
    var textNodeAB = document.createTextNode("AB");

    /* append the text nodes to the cells */
    aaCell.appendChild(textNodeAA);
    abCell.appendChild(textNodeAB);

    /* append the row element to the tbody element ... again */
    tbodyElement.appendChild(trElement1);

    /* create two new cells that are shallow copies of the two cells above */
    var baCell = trElement1.cells[0].cloneNode(false);
    var bbCell = trElement1.cells[1].cloneNode(false);

    /* create two more text nodes */
    var textNodeBA = document.createTextNode("BA");
    var textNodeBB = document.createTextNode("BB");

    /* create a row element that is a shallow copy of the first row */
    trElement2 = trElement1.cloneNode(false);

    /* append the 2nd row element to the tbody element */
    tbodyElement.appendChild(trElement2);

    /* append the text nodes to the cells */
    baCell.appendChild(textNodeBA);
    bbCell.appendChild(textNodeBB);

    /* append the cells to the 2nd row element */
    trElement2.appendChild(baCell);
    trElement2.appendChild(bbCell);

    /* set the border style of the table element */
    tableElement.style.border="4px solid black";
}