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>
