Create a Table Dynamically

I recently needed to create a dynamic table for a visual aesthetic. A few background images had been strategically placed alongside the content, and the grid provided structure and flow.  Using this bit of code, I was able to target a div to populate an empty table, and style it accordingly.

function insertTable()
    var num_rows = 100;
    var num_cols = 4;
    var width = 100;
    var theader = "<table id='sub_table' width = ' "+ width +"% '>";
    var tbody = "";

    for(var i = 0; i < num_rows; i++)
        tbody += "<tr>";
        for(var j = 0; j < num_cols; j++)
            tbody += "<td>";
            tbody += "";
            tbody += "</td>"
        tbody += "</tr>";
    var tfooter = "</table>";
    document.getElementById('grid').innerHTML = theader + tbody + tfooter;


Sourced here, there are further instructions to get this table to operate with the functions of forms in place on the page, and bring in only the requested fields.


Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.