Create a table dynamically using JavaScript

The JavaScript function below dynamically creates a table.

This sample function accepts an array of "person" objects as the function argument and inserts a link on each cell showing the person object's properties namely the ID (person.id) and name (person.name). Just change this function's argument to suit your needs.

This function also creates a table with 2 columns. If you want to change the number of columns to 3 or more, simply change the value for the variable "maxCols". It is used against the variable "tdCtr" ( for td counter) as a conditional expression in the code. See the code for the conditional expression (tdCtr == maxCols). Change the value assigned to "maxCols" (i.e. maxCols = 2) to your desired number of columns.

function createTable(personList) {
 
   //get the node where you will append the new table
   var divPersonInfo = document.getElementById("divPersonInfo");   

   //create elements <table> 
   var tbl = document.createElement("table");
   tbl.className = "otherPartTerms";
   //create the <thead> element and add it to the table
   var header = tbl.createTHead();
   //create the <tr> element for the thead
   var tr = document.createElement("tr");
   //create the <th> element for the tr
   var th = document.createElement('th');
   th.innerHTML = "Your contact list:"
   th.colSpan = 2; 
   //append the new <th> element to the <tr> element 
   tr.appendChild(th);
   //append the <tr> element to the <thead> element
   header.appendChild(tr);

   //create <tbody> element
   var tblBody = document.createElement("tbody"); 
   //set the td counter
   var tdCtr = 0;

   //set the maximum # of columns for this table

   var maxCols = 2;
   var trAppendedToBody = true;
   for (var i = 0; i < personList.length; i++) { 
       var person = personList[i];
       //tr creation
       if (tdCtr == 0) {
          var tr = document.createElement("tr"); 
          trAppendedToBody = false;
       }
       //td creation
       var td = document.createElement("td");  
       td.innerHTML = "<a href=\"#\" class=\"personLink\"  onclick=\"displayPersonInfo(this); return false;\" />" + person.id + " -- " + person.name + "</a>";
       //append td to tr
       tr.appendChild(td);
       tdCtr = tdCtr+1;  
       if (tdCtr == maxCols && i != personList.length - 1 ) {
           //append the current tr to tbody
           tblBody.appendChild(tr);
           //set vars
           tdCtr = 0;
           trAppendedToBody = true;
       }  
   }; 
   //if current tr did not have max # of td then it was not appended to the tbody
   if (!trAppendedToBody) {

       //create empty tds and append to tr (so that css border will be displayed completely)
       for (var j = tdCtr; j <maxCols; j++) {   
         var td = document.createElement("td"); 
         tr.appendChild(td);
       } 
       //append the current tr to tbody
       tblBody.appendChild(tr); 
   }
   //append the tbody element to the new table element
   tbl.appendChild(tblBody);
   //append the newly created table to your target node
   divPersonInfo.appendChild(tbl);
}