Creating a table

dynamically creating a table

by Christoph

HTML

<div id="scrollingDiv">
    <table id="contentTable" border="1">
        <!-- Fill table programmatically -->
    </table>
</div>

CSS

#scrollingDiv
{
    border: 2px groove black;
    height: 350px;
    width: 350px;
    background: #787878;
    overflow: auto;
}

#contentTable
{
    height: 350px;
    width: 350px;
}
.every3rdrow{
    border-bottom:3px solid black;
}

JavaScript

function buildTable()
{
    var myTable =document.getElementById("contentTable");

    var rows = [];
    var cells = [];

    for( var i = 0; i < 100 / 8; i++ )
    {
        rows[i] = myTable.insertRow(i);
        if(i%3==2)rows[i].addClass("every3rdrow");
        cells[i] = [];

        for( var x = 0; x < 60; x++ )
        {
            cells[i][x] = document.createElement((x==0)?"th":"td");
            cells[i][x].innerHTML = (x==0)?"th":"&nbsp;";
            rows[rows.length - 1].appendChild(cells[i][x]);
        }
    }

}
buildTable();