Posted By

COBOLdinosaur on 04/04/13

Tagged

Versions (?)

Last Edited at 04/04/13 07:15am

Statistics

Viewed 810 times

Favorited by 0 user(s)

Related snippets

Dynamic Table Generator

/ Published in: JavaScript

The use of dynamic data acquisition on modern web sites and in a lot of intranet applications, sometimes means we have to build structures dynamically as data comes in from a feed or AJAX operations. The problem is not with the data, but rather that it is unstructured, or not appropriately tagged. The solution is to dynamically build the necessary structures to make the data presentable in a web page

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

function buildTable()
{  
    tabobj = document.createElement("table");
    tabobj.width="80%";
    tabobj.style.backgroundColor = "khaki";
    tabobj.style="margin:auto";
    tabobj.style="border-radius:10px";
    thead = document.createElement("thead");
    tabobj.appendChild(thead);
    row = document.createElement("tr");
     thead.appendChild(row);
    for (i=0; i< 4; i++)
    {
        tHdg = document.createElement("th");
        HdgName = 'Heading' + (i+1);
        tHdg.innerHTML=HdgName;
        row.appendChild(tHdg);
    }
    tbody=document.createElement("tbody");
    tabobj.appendChild(tbody);
    for (i = 0; i < 5; i++) 
    {
        row = document.createElement("tr");
        row.setAttribute("id", "tr" + i);
        for (j = 0; j < 4; j++) 
        {
            td = document.createElement("td");
            td.className='cell';
            tContent = "row" +i + " cell" +j;
            td.innerHTML=tContent;
             row.appendChild(td);
        }
        tbody.appendChild(row);
    }
    main=document.getElementById('container');
    main.appendChild(tabobj);
}