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.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.

 

[RobG]

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

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('Delete row'));
textButton.onclick = 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.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>