Dynamically create a tag with onclick

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.createElement("TD"); //create the TD
var link = document.createElement("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.

re: Dynamically create a tag with onclick

shadow.demon@gmail.com wrote:[color=blue]
> 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.createElement("TD"); //create the TD
> var link = document.createElement("a") //create element a[/color]

Don't use an A element for this, use a button or style a text element to
look 'clickable':

var textButton = document.createElement('span');
textButton.className = 'clickable';
textButton.appendChild(document.createTextNode('De lete row'));
textButton.onclick = deleteParentRow;
td6.appendChild(textButton);

[color=blue]
> 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.
>[/color]

The deleteParentRow function should look like:

function deleteParentRow()
{
var el = this;
while(el.parentNode && 'tr' != el.nodeName.toLowerCase()){
el = el.parentNode
}
if ('tr' == el.nodeName.toLowerCase()) {
el.parentNode.removeChild(el);
}
}

The clickable style may be:

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


--
Rob