Dynamically create a tag with onclick

[shadow.demon]

G'day guys,

i've looked around but i can't find how to create an A tag with a
onclick to remove a row in a table. Can add rows to table, but i can't
get it to create a link in the last coloumn to click to remove the row.

I've got:

var td6 = document.create Element("TD"); //create the TD
var link = document.create Element("a") //create element a
link.href = "test";
td6.appendChild (link); //add to the cell

the row function works fine but add a OnClick event to last coloumn i
can't seem to work out. Thanks guys.

[RobG]

sh**********@gm ail.com wrote:

G'day guys,

i've looked around but i can't find how to create an A tag with a
onclick to remove a row in a table. Can add rows to table, but i can't
get it to create a link in the last coloumn to click to remove the row.

I've got:

var td6 = document.create Element("TD"); //create the TD
var link = document.create Element("a") //create element a
Don't use an A element for this, use a button or style a text element to
look 'clickable':

var textButton = document.create Element('span') ;
textButton.clas sName = 'clickable';
textButton.appe ndChild(documen t.createTextNod e('Delete row'));
textButton.oncl ick = deleteParentRow ;
td6.appendChild (textButton);

link.href = "test";
td6.appendChild (link); //add to the cell

the row function works fine but add a OnClick event to last coloumn i
can't seem to work out. Thanks guys.

The deleteParentRow function should look like:

function deleteParentRow ()
{
var el = this;
while(el.parent Node && 'tr' != el.nodeName.toL owerCase()){
el = el.parentNode
}
if ('tr' == el.nodeName.toL owerCase()) {
el.parentNode.r emoveChild(el);
}
}

The clickable style may be:

<style type="text/css">
.clickable {
cursor: pointer;
color: blue;
text-decoration: underline;
}
</style>
--
Rob