Create a Table Dynamically

January 16, 2015

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;
}

jQuery(document).ready(function(){
	insertTable();
});

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.