Page 1 of 1

Dynamically removing table row

Posted: Tue May 23, 2006 12:12 pm
by pickle
Hi all,

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);
}
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.

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);

      }

Ideas

Posted: Sun May 28, 2006 5:16 pm
by tr0gd0rr
A few ideas to try are:

1. Try using tbody around each tr, then remove the tbody

2. Try using different doc types to see if it is a standards mode/quirks mode issue

3. Try removing whitespace from the tr node before removing it

4. If you get stuck, you can always do tbody.style.display = 'none' to hide, or tbody.style.display = '' to show

Posted: Mon May 29, 2006 9:41 am
by pickle
Well I got it working, but I'm not sure why ;)

Updated code:

Code: Select all

....
//add the new row between the header & the total field
var well = document.getElementById('well');
totalRow = document.getElementById('customTotalRow');
well.tBodies[0].insertBefore(rowNode,totalRow);
I guess using insertBefore() works better than appendChild()

Posted: Fri Jun 02, 2006 8:32 pm
by n00b Saibot
pickle wrote:I guess using insertBefore() works better than appendChild()
yep, you're right. I'm not sure tho wht was the problem i happened to have from appendChild... something like UI not updating or similar...

there is also things like :arrow: oTbl.insertRow(), oTbl.insertCell(), oTbl.deleteRow(), oTbl.deleteCell() etc.