Dynamically creating an HTML table in javascript

I'm creating a table in javascript dynamically. The table I'm creating is 100 rows by 3 columns. Currently I have my own DynamicArray class that I use to make Javascript's Array object work more like C++'s vector class.

Here is the basic logic for generating the HTML:

function BuildTable( data )
{
    var div = document.getElementById( 'TheTable' );
    var tableHtml = new DynamicArray();
    tableHtml.Add( '<table>' );

    for( var i = 0; i < data.length; ++i )
    {
        tableHtml.Add( '<tr>' );
        BuildTableRow( data[i], tableHtml );
        tableHtml.Add( '</tr>' );
    }

    tableHtml.Add( '</table>' );
    div.innerHTML = tableHtml.Join( '' );
}

When using Firebug in Firefox, I debug everything and it all seems to work fine. However, my table only appears for a brief second (after this script executes) and then it disappears. Not sure why this is happening. Can anyone help out? The entire code is below:

My index.html:

<html>
    <head>
        <title>HTML / Javascript Demonstration</title>
        <script type="text/javascript">
            function Include( file )
            {
                document.write( '<script type="text/javascript" src="' + file + '"></scr' + 'ipt>' );
            }
        </script>

        <script type="text/javascript" src="main.js"></script>
    </head>

    <body onload="GenerateTable()">
        <div id="TheTable" />
    </body>
</html>

My main.js file:

Include( 'DynamicArray.js' );

function GenerateTable()
{
    var tableData = BuildData();
    BuildTable( tableData );
}

function BuildTable( data )
{
    var div = document.getElementById( 'TheTable' );
    var tableHtml = new DynamicArray();
    tableHtml.Add( '<table>' );

    for( var i = 0; i < data.length; ++i )
    {
        tableHtml.Add( '<tr>' );
        BuildTableRow( data[i], tableHtml );
        tableHtml.Add( '</tr>' );
    }

    tableHtml.Add( '</table>' );
    div.innerHTML = tableHtml.Join( '' );
}

function BuildTableRow( data, tableHtml )
{
    for( var i = 0; i < data.length; ++i )
    {
        // @note toString() does not work in Netscape 2 or Explorer 3
        tableHtml.Concat( ['<td>', data[i].toString(), '</td>'] );
    }
}

function BuildData()
{
    var numRows = 100;
    var numColumns = 3;
    var data = new Array( numRows );

    for( var i = 0; i < numRows; ++i )
    {
        var row = new Array( numColumns );
        FillRow( row, numColumns );
        data[i] = row;
    }

    return data;
}

function FillRow( row, numColumns )
{
    for( var i = 0; i < numColumns; ++i )
    {
        row[i] = Math.floor( Math.random() * 10000 );
    }
}

And finally my DynamicArray.js:

function DynamicArray()
{
    this.array = new Array();
    this.count = 0;

    this.Add = DynamicArray_Add;
    this.Join = DynamicArray_Join;
    this.Concat = DynamicArray_Concat;
}

function DynamicArray_Add( item )
{
    this.array[this.count++] = item;
}

function DynamicArray_Join( delimiter )
{
    return this.array.join( delimiter );
}

function DynamicArray_Concat( array )
{
    this.array = this.array.concat( array );
    this.count += array.length;
}

ansaurus

tags:

views:

answers:

Dynamically creating an HTML table in javascript

related questions