[SOLVED] append custon object as child.

[mbeals]

I have a page that does dynamic database updates/queries via ajax.  Part of this allows the user to click an edit icon in a table row, which switches that row into "edit mode".

 

When I switch between modes, I change the layout of buttons (in the form of hyperlinked images) in the last cell.  Each "button" consists of a p tag with a href child with an img child.  I build each object individually, then use appendChild to nest them.  Finally, I use appendChild again to assign the final "Button" to the cell in the table.

 

To simplify this,  I created an object that takes button type as an argument.  I want to be able to do something like:

 

var cell = getElementById('cell');
var accept = new button('accept');
var cancel = new button('cancel');

cell.appendChild(accept);
cell.appendChild(cancel);

 

I appologize for not having full code.  My internet connection is currently down and I'm typing this up on by phone.  I will post full code a little later if needed.

 

[corbin]

So uhhh....  What was your question?

[mbeals]

Sorry,

I figured out a workaround, but I'm not completely happy with it.

 

Basically I want to create an object that extends the p object such that when I append it as a child to another object (table cell), it treats it like a p object.

 

here's some sample code:

 

function button(type,id){
this.id    = id;
   	this.type    = type;
this.p_tag   = document.createElement('p');
this.a_tag   = document.createElement('a');
this.img_tag = document.createElement('img');
this.img_tag.width = 16;
this.img_tag.height = 16;
this.img_tag.border = 0;

this.p_tag.appendChild(this.a_tag);
this.a_tag.appendChild(this.img_tag);	
this.a_tag.setAttribute('href', '#');

	switch(this.type){

	case 'accept' :
					this.a_tag.setAttribute('onClick', 'accept('+this.id+')');
					this.img_tag.src = 'images/accept.jpg';
					this.img_tag.alt = 'accept';
					this.img_tag.title = 'accept';
					break;
	case 'cancel' :
					this.a_tag.setAttribute('onClick', 'cancel('+this.id+')');
					this.img_tag.src = 'images/restart.jpg';
					this.img_tag.alt = 'cancel';
					this.img_tag.title = 'cancel';
					break;
	case 'delete' :
					this.a_tag.setAttribute('onClick', 'del('+this.id+')');						
					this.img_tag.src = 'images/b_drop.png';
					this.img_tag.alt = 'delete';
					this.img_tag.title = 'delete';
					break;
	case 'edit'   :
					this.a_tag.setAttribute('onClick', 'edit('+this.id+')');						
					this.img_tag.src = 'images/b_edit.png';
					this.img_tag.alt = 'edit';
					this.img_tag.title = 'edit';
					break;
	}

}

 

with this code I can do this:

 

var cell = document.getElementById('cell');

var accept = new button('accept','button1');
var cancel = new button('cancel','button2');

cell.appendChild(accept.p_tag);
cell.appendChild(cancel.p_tag);

 

I would prefer this behavior:

var cell = document.getElementById('cell');

var accept = new button('accept','button1');
var cancel = new button('cancel','button2');

cell.appendChild(accept);
cell.appendChild(cancel);

 

in which case the base 'button' class would really be an extension of the p class.  Does that help?