Hola,
he hecho un script que crea dinámicamente una tabla en base a las filas y columnas introducidas por el usuario. El problema es que cuando creo la tabla, también creo seguidamente un form con un botón que me debería dinámicamente eliminar esa tabla. Y eliminarla la elimina, pero sin esperar a que pulse el botón que desencadene el evento.
Aquí teneis el código entero por si quereis comprobarlo vosotros mismos
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crear tabla y eliminar con DOM</title>
<script type="text/javascript">
function crear_tabla(miForm) {
// Obtener datos introducidos en campos de texto
var nFilas = miForm.numFilas.value;
var nCols = miForm.numCols.value;
// Obtener la referencia donde se encuentra el bloque <div> que contendrá la tabla, y form/botón para eliminarla posteriormente
var lugar = document.getElementById("contenedorTabla");
// Crear la tabla, y anexarla al árbol del documento como hijo del elemento <div> contenedorTabla
var miTabla = document.createElement("table");
lugar.appendChild(miTabla);
// Poblar tabla
// Crear <tbody> y añadirla como hijo de <table>
var miTbody = document.createElement("tbody");
miTabla.appendChild(miTbody);
// Bucle externo para las filas <tr>
for (var i = 0; i < nFilas; i++) {
// Crear elemento <tr> y añadirlo como hijo de <tbody>
var mi_tr = document.createElement("tr");
miTbody.appendChild(mi_tr);
// Bucle interno para las columnas de cada fila
for (var j=0; j < nCols; j++) {
// Crear <td> y anexarlo como hijo del <td> actual
var mi_td = document.createElement("td");
mi_tr.appendChild(mi_td);
// Crear el nodo de texto hijo del elemento <td> actual
var miTexto = document.createTextNode("Fila " + i + " Col " + j);
mi_td.appendChild(miTexto);
}
}
// Crear un borde de tabla de 1
miTabla.border = 1;
// Cambiar el texto de presentación de la tabla
document.getElementById("presentacionTabla").firstChild.nodeValue = "Aquí tiene la tabla construida: ";
// Asignar un id a la nueva tabla para poder editarla dinámicamente en el futuro
miTbody.id = "cuerpoTabla";
// Crear un formulario con botón para destruir la tabla creada
var formEliminar = document.createElement("form");
lugar.appendChild(formEliminar);
// Crear boton para eliminar
var botonEliminar = document.createElement("input");
botonEliminar.type = "button";
botonEliminar.value = "Eliminar la tabla";
formEliminar.appendChild(botonEliminar);
botonEliminar.onClick = eliminar_tabla(miTabla); // Probé tratando este evento como si se tratase de otro atributo (poniendo el contenido entre comillas) pero no funcionaba, y así se ejecuta la llamada pero sin esperar al evento onClick
}
function eliminar_tabla(tablaActual) {
alert("Eliminando tabla...");
// Eliminar tabla desde propia tabla
tablaActual.parentNode.removeChild(tablaActual);
// Eliminar formulario de eliminar desde nodo padre
lugar.removeChild(formEliminar);
}
</script>
</head>
<body>
<p>Introduce el número de filas y columnas para crear la tabla:</p>
<form id="formulario" name="form1" method="post" action="javascript:void(0)">
<p>Filas:
<input name="numFilas" type="text" id="numFilas" size="4" />
x Columnas:
<input name="numCols" type="text" id="numCols" size="4" />
</p>
<p>
<input type="submit" name="boton" id="boton" value="Enviar" onclick="crear_tabla(this.form)"/>
</p>
</form>
<p id="presentacionTabla">La tabla aparecerá aquí:</p>
<div id="contenedorTabla"></div>
</body>
</html>