Page 1 of 1

passing id problem

Posted: Tue Apr 03, 2007 8:10 pm
by sarris
hi there. i am trying to create a semi dynamic table.
The table has two rows and i want to be able to add and remove cells, up to three for each row.
I have managed to add elements pretty well so far using that code

Code: Select all

<table id = "areas" border="0" width="98%" height="50">
				<tr id = "row1">

				</tr>
				<tr id = "row2">

				</tr>
			
			</table>

Code: Select all

function addAreaToTable(text,value){
	var row1 = document.getElementById("row1");
	var row2 = document.getElementById("row2");

	if(row1has<3){
		var cell = document.createElement("td");
		cell.setAttribute('id',text);
		cell.innerHTML = '<a href="javascript: removeAreaFromTable('+cell.id+')">'+text+'</a>';
		row1has = row1has + 1;
		row1.appendChild(cell);	
	}
	else if(row2has<3){
		var cell = document.createElement("td");
		cell.setAttribute('id',text);
		cell.innerHTML = '<a href="javascript: removeAreaFromTable('+cell.id+')">'+text+'</a>';
		row2has = row2has + 1;
		row2.appendChild(cell);
	}
	else{
		alert("No more than 6 areas");
	}	
}
the problem i have is at removing the cells

Code: Select all

function removeAreaFromTable(id){
	alert(id);
	var cell = document.getElementById(id);
	var row = cell.parentElement;
	alert(row.id);
	row.removeChild(cell);
}
i dont know if this is going to work, but so far the problem is that the alert instead of showing the id of the cell element (which is the "text" parameter passed at the addAreaToTable function) it shows [object HTMLTableCellElement]. That looks weird to me as when i have the mouse over the content of the cell, the status bar below on the page shows "javascript : removeAreaFromTable(areaname)" , as it is passing the name regurarly...any ideas?
thanks

Posted: Tue Apr 03, 2007 8:53 pm
by feyd
You should probably be using row.getAttribute('id')

Posted: Wed Apr 04, 2007 12:23 pm
by sarris
i managed to pass the id in the end...
now i think i am having a problem with getting the parent of the cell

the alert in that case shows the id of the cell (just to confirm that everything is passed ok)

Code: Select all

function removeAreaFromTable(id){
	var cell = document.getElementById(id);
	var row = cell.parentElement;
                alert(cell.getAttribute("id"));
	row.removeChild(cell);
}
the alert in that case, when trying to show the id of the row, doesnt show at all. and off course the child is not removed.

Code: Select all

function removeAreaFromTable(id){
	var cell = document.getElementById(id);
	var row = cell.parentElement;
                alert(row.getAttribute("id"));
	row.removeChild(cell);
}

Posted: Wed Apr 04, 2007 12:26 pm
by sarris
aaahh...forget it.sorry to bother...i needed to have parentNode instead of parentElement.