Dynamically removing table row

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Dynamically removing table row

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

      }
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
tr0gd0rr
Forum Contributor
Posts: 305
Joined: Thu May 11, 2006 8:58 pm
Location: Utah, USA

Ideas

Post 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
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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()
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

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