passing id problem
Posted: Tue Apr 03, 2007 8:10 pm
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
the problem i have is at removing the cells
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
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");
}
}Code: Select all
function removeAreaFromTable(id){
alert(id);
var cell = document.getElementById(id);
var row = cell.parentElement;
alert(row.id);
row.removeChild(cell);
}thanks