Dynamically removing table row
Posted: Tue May 23, 2006 12:12 pm
Hi all,
I'm having a bit of trouble when removing table rows using DOM javascript. My code is this:
This function is called when clicking an image in a cell in a row in a table. So, this code removes the row the image is in. That all works fine. However, in Firefox (not IE), there is a little whitespace (2 pixels) left over. I've checked the DOM and there's no row or cell there, just whitespace.
Does anyone know how to get around this?
If it's relevant, this is the function that adds a new row to the table I'm trying to remove rows from.
I'm having a bit of trouble when removing table rows using DOM javascript. My code is this:
Code: Select all
function removeFromWell(obj)
{
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
}Does anyone know how to get around this?
If it's relevant, this is the function that adds a new row to the table I'm trying to remove rows from.
Code: Select all
function moveToWell(obj)
{
//get values to transfer
var entryName = obj.parentNode.parentNode.cells[0].innerHTML;
var entryValue = obj.parentNode.parentNode.cells[1].innerHTML;
//create row
rowNode = document.createElement('tr');
//create remove cell
removeNode = document.createElement('td');
removeNode.innerHTML = "<img src = 'images/cancel.png' onClick = 'removeFromWell(this);' />";
rowNode.appendChild(removeNode);
//create name cell
nameNode = document.createElement('td');
nameNode.innerHTML = entryName;
rowNode.appendChild(nameNode);
//create value cell
valueNode = document.createElement('td');
valueNode.innerHTML = entryValue
rowNode.appendChild(valueNode);
//add row to table (if tBodies.length > 0, we're in IE)
if(document.getElementById('well').tBodies.length > 0)
document.getElementById('well').tBodies[0].appendChild(rowNode);
else
document.getElementById('well').appendChild(rowNode);
}