object undefined 1

CassidyHunt · Apr 13, 2006

I am trying to build a custom user control for one of my web applications and I am testing the javascript piece. I get TableRow undefined and I do not know why.

Here is the code:

Code:

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
 // Table Row -- Collection of table cells matching columns
function TableRow(index) {
    this.index = index;
    this.Columns = [];
};

TableRow.prototype.addColumn = 
    function(index,name, value) {
        if(!index) { index = this.Columns.Length + 1; }
        this.Columns[index] = {
            ColumnName : name,
            ColumnValue : value
        };
    };

// Table object must be used in conjunction with row object
function Table(objName) {
    this.config = {
        cssClass : 'treetable',
        cellSpacing : 0,
        cellPadding : 0,
        border : 0,
        font-family : 'Arial',
        font-size : '10pt',
        font-weight: 'normal',
        width: '100%'
    };
    
    this.obj = objName;
    this.Rows = [];
};

Table.prototype.addRow = 
    function(index, row) {
        if(!index) { index = this.Rows.Length + 1; }
        this.Rows[index] = row;
        
        return false;
    };

Table.prototype.RenderHTML =
    function(parentElementId) {
        var parent = document.getElementById(parentElementId);
        
        var table = new document.createElement("Table");
        
        for(var i=0; i < this.Rows.Length; i++) {
            var tr = new document.createElement("tr");
            for(var d=0; d < this.Rows[i].Columns.Length; d++) {
                var td = new document.createElement("td");
                var text = new document.createTextNode(this.Rows[i].Columns[d].ColumnValue);
                td.appendChild(text);
                tr.appendChild(td);
            }
            table.appendChild(tr);
        }
        
        parent.appendChild(table);
        
    };
    </script>
    <style type="text/css">
    .branch {
        display: block;
        margin-left: 16px;
    }
    </style>
</head>

<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript" >
            var a_row = new TableRow(0);
            
            a_row.addColumn(0,'Test 1', 1);
            a_row.addColumn(1,'Test 2', 2);
            a_row.addColumn(2,'Test 3', 3);
            
            var b_row = new TableRow(1);
            
            b_row.addColumn(3,'Test 1', 4);
            b_row.addColumn(4,'Test 2', 5);
            b_row.addColumn(5,'Test 3', 6);
            
            var a_Table = new Table('a_Table');
            
            a_Table.addRow(0,a_row);
            a_Table.addRow(1,b_row);
            
            a_Table.RenderHTML('me');
        </script>
        <div id="me">
        
        </div>
    </div>
    </form>
</body>
</html>

Does anyone see why I would receieve that for this line:

Code:

var a_row = new TableRow(0);

Thanks for the help

Cassidy

adam0101 · Apr 13, 2006

I see a few things...

1. Property names can't contain dashes. I.e. font-family.

2. This line executes if index==0. Is that the intended behavior?
if(!index) { index = this.Rows.Length + 1; }

3. The code that adds the data executes before the div is defined. This code should go in a function that gets called from the onload event.

4. The "new" in lines like new document.createElement("Table") are I believe setting the variables to a copy of the create function instead the result of the function.

Work on those and let me know how it goes.

Adam
http://adameslinger.blogspot.com/

CassidyHunt · Apr 13, 2006

I think that almost did it. I got rid of that pesky error and can even show an alert box with the innerHTML of the DOM object I created. Problem is it won't refresh on the screen.

Here is my fixed code:

Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
 // Table Row -- Collection of table cells matching columns
function TableRow(index) {
    this.index = index;
    this.Columns = [];
};

TableRow.prototype.addColumn = 
    function(index,name, value) {
        if(!index && index != 0) { index = this.Columns.Length + 1; }
        this.Columns[index] = {
            ColumnName : name,
            ColumnValue : value
        };
        
    };

// Table object must be used in conjunction with row object
function Table(objName) {
    this.config = {
        cssClass : 'treetable',
        cellSpacing : 0,
        cellPadding : 0,
        border : 0,
        fontfamily : 'Arial',
        fontsize : '10pt',
        fontweight: 'normal',
        width: '100%'
    };
    
    this.obj = objName;
    this.Rows = [];
};

Table.prototype.addRow = 
    function(index, row) {
        if(!index && index != 0) { index = this.Rows.Length + 1; }
        this.Rows[index] = row;
        
    };

Table.prototype.RenderHTML =
    function(parentElementId) { 
        var parent = document.getElementById(parentElementId);
        
        var table = document.createElement("Table");
        
        for(var i=0; i < this.Rows.length; i++) {
            var tr = document.createElement("tr");
            for(var d=0; d < this.Rows[i].Columns.length; d++) {
                var td = document.createElement("td");
                var text = document.createTextNode(this.Rows[i].Columns[d].ColumnValue);
                td.appendChild(text);
                tr.appendChild(td);
            }
            table.appendChild(tr);
        }
        
        parent.appendChild(table);
        alert(parent.innerHTML);
    };
    </script>
    <style type="text/css">
    .branch {
        display: block;
        margin-left: 16px;
    }
    </style>
</head>

<body>
<div id="testme">

</div>
    <form id="form1" runat="server">
    
    <div>
        <script type="text/javascript" >
            var a_row = new TableRow(0);
            
            a_row.addColumn(0,'Test 1','1');
            a_row.addColumn(1,'Test 2', '2');
            a_row.addColumn(2,'Test 3', '3');
            
            var b_row = new TableRow(1);
            
            b_row.addColumn(0,'Test 1', '4');
            b_row.addColumn(1,'Test 2', '5');
            b_row.addColumn(2,'Test 3', '6');
            
            var a_Table = new Table('a_Table');
            
            a_Table.addRow(0,a_row);
            a_Table.addRow(1,b_row);
            
            a_Table.RenderHTML('testme');
            
        </script>
        
        
    </div>
    
    </form>
</body>
</html>

Any ideas?

CassidyHunt · Apr 13, 2006

Got it. You have to have a tbody element when you use Dom.

Thanks

Cassidy

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

object undefined 1

CassidyHunt

IS-IT--Management

adam0101

Programmer

CassidyHunt

IS-IT--Management

CassidyHunt

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor