DOM adding and deleting elements
Using DOM is possible add html elements or delete them without reload page, here and examplewith two functions to do that:
<head>
<script language=”javascript”>
function crear_td(colspan) {
// First we count how many elements exist to create an id
cuantos=document.getElementsByTagName(”td”).length;
cuantos=cuantos+1;
// Using innerHTML we create the new element in the element “listado” (container)
document.getElementById(’listado’).innerHTML+=’<td id=’+cuantos+’ colspan=’+colspan+’><a href=”#” onclick=”javascript:borrar_td(’+cuantos+’); return false;”>Remove</a></td>’;
}
function borrar_td(id) {
// First we select an element in our element container
var d = document.getElementById(’listado’);
// After we select element
var olddiv = document.getElementById(id);
// Finally delete them
d.removeChild(olddiv);
}
</script>
</head>
<body>
<p align=”center”>
colspan: <input type=”text” name=”txt_colspan” id=”txt_colspan” value=”2″ />
<input type=”button” name=”create_btn” value=”Add Cell” onclick=”javascript:crear_td(txt_colspan.value)” />
</p>
<table width=”700″ align=”center” border=”1″>
<tr id=”listado”>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
