Crear elementos dinamicamente

leafartn · #1 (**permalink**) 15/01/2011, 08:46

Hola

Estoy tratando de crear y eliminar elementos dinamicamente, tengo un codigo de ejemplo muy bueno, pero mi problema es que el elemento que quiero crear es un DIV con una tabla y varias imagenes dentro. El codigo en el que me estoy basando para crear elementos es el siguiente:

Código HTML:

<html> 
<head>
<title>Crear input file</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
num=0;
function crear(obj) {
  num++;
  fi = document.getElementById('fiel'); // 1
  contenedor = document.createElement('div'); // 2
  contenedor.id = 'div'+num; // 3
  fi.appendChild(contenedor); // 4

  ele = document.createElement('input'); // 5
  ele.type = 'file'; // 6
  ele.name = 'fil'+num; // 6
  contenedor.appendChild(ele); // 7
  
  ele = document.createElement('input'); // 5
  ele.type = 'button'; // 6
  ele.value = 'Borrar'; // 8
  ele.name = 'div'+num; // 8
  ele.onclick = function () {borrar(this.name)} // 9
  contenedor.appendChild(ele); // 7
}
function borrar(obj) {
  fi = document.getElementById('fiel'); // 1 
  fi.removeChild(document.getElementById(obj)); // 10
}
--> 
</script>
</head>
<body>
<form method="post" action="algo.php">
<fieldset id="fiel">
<input type="button" value="Crear" onclick="crear(this)" />
</fieldset>
</form> 
</body>
</html>

y El elemento que quiero crear es el siguiente:

Código HTML:

<div class="drag">
	<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3" align="center" border="0">
			<font face="verdana" size="1" color="blue">conector</font>
		</td>
	</tr>
	<tr>
		<td colspan="2" align="center">
			<font face="verdana" size="1" color="blue">name</font>
		</td>
		<td>
			<img href="#" src="img/star2.png" style="cursor: pointer" onClick="openmypage(); return false">
		</td>
	</tr>
	<tr rowspan="3" align="center">
		<td colspan="3">
			<div class="handle" style="cursor: move">
				<img src="img/star.png">
			</div>
		</td>
	</tr>
	<tr rowspan="3" align="center">
		<td colspan="3">
			<font face="verdana" size="1" color="blue">linea</font>
		</td>
	</tr>
	</table>
</div>

Basicamente mi problema es con el javascript, ya que soy nuevo en esto jeje

Muchas gracias!

maycolalvarez · #2 (**permalink**) 15/01/2011, 08:55

simplemente debes adaptarlo para crear la jerarquía de table > [tbody >] tr > td

cuando crees los td asegurarte de crear y añadirle un TextNode (document.createTextNode('string')) si necesitas incluir texto

leafartn · #3 (**permalink**) 15/01/2011, 09:27

Gracias por responder!

Creo que entiendo lo que tratas de decir, pero podrias hacer un pequeño ejemplo?
Y para agregar imagenes y por ejemplo en unaimagen que tiene un onClick="openmypage(); return false" como hago?

Muchas gracias

Saludos