Creating Table Elements with Javascript

For those of you looking to generate HTML tables dynamically, you may be interested to know that there are numerous ways to do so - each with their own pros and cons. The following are two heavily used approaches:

The left button uses standards compliant DOM methods such as createElement, createTextNode and appendChild to generate the HTML table. The use of these DOM methods guarantees that the function will work in just about every current browser as well as any future browsers. The downside however is that these methods are slow when compared to the alternative approach - that of generating long HTML strings.

Though not standards compliant, this faster version also works in just about every current browser. As such, until the DOM methods have caught up with the alternatives, I would recommend avoiding them unless the tables you plan on generating are consistently small.

Demo

This script was successfully tested in Windows versions of Internet Explorer 5.01 - 7, Firefox 1.5 - 3, Opera 9 and Safari 3.

/////////////////////////////////////////////////////////////////////////////////
// Create a table using DOM methods such as createElement, createTextNode, appendChild
/////////////////////////////////////////////////////////////////////////////////
var createTable_DOM = function (columns, rows) {
    // Create the table
    var myTable = document.createElement("TABLE");
    
    // Header Row
    var myTHead = document.createElement("THEAD");
    myTable.appendChild(myTHead); // Attach the header row to the table
    myTHead.appendChild(document.createElement("TR"));
    for (var i=0; i<columns; i++) {
        myTHead.rows[0].appendChild(document.createElement("TH"));
        myTHead.rows[0].cells[i].appendChild(document.createTextNode("Header " + (i + 1)));
    }
    
    // Body Rows
    var myTBody = document.createElement("TBODY");
    myTable.appendChild(myTBody); // Attach the body rows to the table
    for (var i=0; i<rows; i++) {
        myTBody.appendChild(document.createElement("TR"));
        for (var j=0; j<columns; j++) {
            myTBody.rows[i].appendChild(document.createElement("TD"));
            myTBody.rows[i].cells[j].appendChild(document.createTextNode("Cell " + (i + 1) + ", " + (j + 1)));
        }
    }
    
    // Footer Rows
    var myTFoot = document.createElement("TFOOT");
    myTable.appendChild(myTFoot); // Attach the footer row to the table
    myTFoot.appendChild(document.createElement("TR"));
    for (var i=0; i<columns; i++) {
        myTFoot.rows[0].appendChild(document.createElement("TD"));
        myTFoot.rows[0].cells[i].appendChild(document.createTextNode("Footer " + (i + 1)));
    }
    
    // Place the table into the page
    document.getElementById("create").innerHTML = ""; // FOR DEMO PURPOSES ONLY
    document.getElementById("create").appendChild(myTable);
};

/////////////////////////////////////////////////////////////////////////////////
// Create a table using an array of strings
/////////////////////////////////////////////////////////////////////////////////
var createTable_String = function (columns, rows) {
    // Create the table
    var myTable = ["<TABLE>"];
    
    // Header Row
    myTable.push("<THEAD>");
    myTable.push("<TR>");
    for (var i=0; i<columns; i++) {
        myTable.push("<TH>");
        myTable.push("Header " + (i + 1));
        myTable.push("</TH>");
    }
    myTable.push("</TR>");
    myTable.push("</THEAD>");
    
    // Body Rows
    myTable.push("<TBODY>");
    for (var i=0; i<rows; i++) {
        myTable.push("<TR>");
        for (var j=0; j<columns; j++) {
            myTable.push("<TD>");
            myTable.push("Cell " + (i + 1) + ", " + (j + 1));
            myTable.push("</TD>");
        }
        myTable.push("</TR>");
    }
    myTable.push("</TBODY>");

    // Footer Rows
    myTable.push("<TFOOT>");
    myTable.push("<TR>");
    for (var i=0; i<columns; i++) {
        myTable.push("<TD>");
        myTable.push("Footer " + (i + 1));
        myTable.push("</TD>");
    }
    myTable.push("</TR>");
    myTable.push("</TFOOT>");
    
    // Place the table into the page
    myTable.push("</TABLE>"); // finish the table
    document.getElementById("create").innerHTML = myTable.join("");
};