Codificación aprenderaprogramar.com: CU01139E
EJERCICIO RESUELTO CON INNERHTML JAVASCRIPT
En la anterior entrega del curso hemos visto la sintaxis y forma de uso básica de innerHTML en JavaScript. Ahora vamos a plantear y dar la solución a un ejercicio en el que tratamos de hacer un uso más avanzado de innerHTML. En concreto, dada una tabla con datos, veremos cómo podemos convertir los datos en editables.
ENUNCIADO DEL EJERCICIO
Con este ejercicio queremos por un lado utilizar los conocimientos adquiridos a lo largo del curso, y por otra parte hacernos a la idea de que siempre necesitaremos buscar información adicional para resolver algunas cuestiones que no conocemos a priori. Cuando se trabaja en desarrollos web es imposible conocer toda la sintaxis y las posibles instrucciones, propiedades, etc. y por tanto es necesario recurrir a la consulta de libros, revistas o páginas web para obtener información adicional a nuestro conocimiento.
El enunciado del ejercicio es el siguiente:
Una página web carga una tabla con datos relativos al contenido nutricional de los alimentos como se muestra a continuación:
| Alimento | Calorías (kCal) | Grasas (g) | Proteína (g) | Carbohidratos (g) | Acciones |
|---|---|---|---|---|---|
| Arándano | 49 | 0.2 | 0.4 | 12.7 | Editar |
| Plátano | 90 | 0.3 | 1.0 | 23.5 | Editar |
| Cereza | 46 | 0.4 | 0.9 | 10.9 | Editar |
| Fresa | 37 | 0.5 | 0.8 | 8.3 | Editar |
Se desea que al pulsar en el texto Editar de la columna Acciones, ocurra lo siguiente:
a) El texto de esa columna que ponía <<Editar>> en color azul, será reemplazado por el texto <<En edición>> en color gris o negro.
b) Los datos en la fila correspondiente se convertirán en casillas de texto editables de modo que el usuario pueda modificar los datos de esa fila.
c) Debe aparecer en la parte inferior de la tabla el texto: <<Pulse Aceptar para guardar los cambios o cancelar para anularlos>> y dos botones: Aceptar y Cancelar, que podrán ser pulsados por el usuario para Aceptar los cambios o para cancelar.
Si el usuario pulsa en el botón Aceptar los datos de la fila en edición deben ser enviados a una url de destino por el método get. Por ejemplo si la url de destino es aprenderaprogramar.com y editáramos la fila correspondiente a Fresa y pulsamos aceptar, el navegador debe enviarnos a una url como esta:
http://aprenderaprogramar.com/?alimento=Fresa&calorias=57&grasas=1.5&proteina=0.4&carbohidratos=12.8
Atención: los datos que se deben enviar a la url de destino son los datos editados por el usuario, no los datos originales de la tabla.
Si el usuario pulsa en Cancelar se recargará la tabla original (de forma que no habrá ninguna fila en edición).
Si estando seleccionada una fila en edición el usuario pulsa sobre Editar en otra fila, se mostrará un mensaje indicando lo siguiente: “Solo se puede editar una línea. Recargue la página para poder editar otra”.
La siguiente imagen refleja la idea de lo que se quiere conseguir:
En este ejercicio suponemos que la tabla va a cargar datos desde una base de datos, pero como nuestro objetivo no es el manejo de bases de datos ni de lenguajes del lado del servidor sino ver aplicaciones de JavaScript, nos limitaremos a crear la tabla manualmente con el código HTML necesario.
ORIENTACIONES PARA LA SOLUCIÓN: PASO 1
Intenta resolver el ejercicio con los conocimientos adquiridos a lo largo del curso y realizando alguna consulta adicional en internet. Es bueno intentar enfrentarse a los problemas por uno mismo y tratar de resolverlos por uno mismo, ya que favorece el aprendizaje como programadores. Ten en cuenta que este ejercicio posiblemente no tenga una solución única, sino que hay distintas formas de plantearlo y distintas formas de resolverlo. Intenta crear tu propia solución y después compárala con la que indicaremos nosotros tratando de ver las ventajas e inconvenientes de una y otra forma de resolver el problema.
ORIENTACIONES PARA LA SOLUCIÓN: PASO 2
Si necesitas una orientación aquí te indicamos a grandes rasgos la solución (complementa estas indicaciones buscando en internet aquello que puedas necesitar) que hemos creado nosotros para que trates de implementarla por ti mismo. Los pasos a seguir serían los siguientes:
1) Crea un archivo html de nombre testEdicionTablas.html donde tengas el código HTML de la tabla, de modo que el texto editar esté dentro de etiquetas span que respondan al evento onclick="transformarEnEditable(this)". Debajo de la tabla añade un div vacío. El div vacío servirá para añadirle lo que se debe mostrar cuando el usuario pulsa sobre un botón editar.
2) Crea un archivo css de nombre estilos.css donde tengas los estilos para la tabla y para las etiquetas span con el texto Editar, botones, etc.
3) Crea un archivo js de nombre functions.js donde tengas una variable global de nombre <<editando>> y tipo booleano que te permita saber si se encuentra en edición alguna fila o no.
4) Crea una función <<function transformarEnEditable(nodo)>> que debe encargarse de transformar en editables los datos de una fila definiéndolos en etiquetas <input> … </input> usando innerHTML. Además debe añadir el texto << Pulse Aceptar para guardar los cambios o cancelar para anularlos >> y los dos botones: Aceptar y Cancelar. Si ya había una fila en edición, en lugar de estos se deberá mostrar el mensaje <<Solo se puede editar una línea. Recargue la página para poder editar otra>>
5) Crea una función <<function capturarEnvio()>> que sirva para que cuando el usuario pulse el botón Aceptar, se cree un formulario con datos ocultos (hidden) capturados de las casillas de la fila en edición y se envíen a la url de destino por el método get. El formulario lo añadirás con innerHTML y el envío lo puedes realizar con la sentencia javascript document.nombreDelformulario.submit();
6) Crea la función anular que recargue la página original cuando el usuario pulse el botón cancelar. Esto puedes hacerlo con la sentencia JavaScript window.location.reload();
SOLUCIÓN PROPUESTA
A continuación indicamos el código de la solución propuesta. Ten en cuenta que esta no tiene por qué considerarse ni la única solución ni la mejor solución. Es posible que tú hayas definido una solución mejor que esta. Compara tu solución con la propuesta y trata de ver las ventajas e inconvenientes de cada una de ellas.
Archivo testEdicionTablas.html:
|
<!DOCTYPE html> <html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="/estilos.css"> <script type="text/javascript" src="/functions.js"></script> </head> <body> <table> <caption>Contenido nutricional por cada 100 g de alimento.</caption> <tr> <th>Alimento</th> <th>Calorías (kCal)</th> <th>Grasas (g)</th> <th>Proteína (g)</th> <th>Carbohidratos (g)</th> <th>Opciones</th> </tr> <tr> <td>Arándano</td> <td>49</td> <td>0.2</td> <td>0.4</td> <td>12.7</td> <td><span class="editar" onclick="transformarEnEditable(this)">Editar</span></td> </tr> <tr> <td>Plátano</td> <td>90</td> <td>0.3</td> <td>1.0</td> <td>23.5</td> <td><span class="editar" onclick="transformarEnEditable(this)">Editar</span></td> </tr> <tr> <td>Cereza</td> <td>46</td> <td>0.4</td> <td>0.9</td> <td>10.9</td> <td><span class="editar" onclick="transformarEnEditable(this)">Editar</span></td> </tr> <tr> <td>Fresa</td> <td>37</td> <td>0.5</td> <td>0.8</td> <td>8.3</td> <td><span class="editar" onclick="transformarEnEditable(this)">Editar</span></td> </tr> </table> <div id="contenedorForm"> </div> </body> </html> |
Archivo estilos.css:
|
/* Curso JavaScript estilos aprenderaprogramar.com*/ body {font-family: Arial, Helvetica, sans-serif; background-color: #FFF8DC;}
table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; margin: 45px; width: 550px; text-align: center; border-collapse: collapse; }
th { font-size: 13px; font-weight: normal; padding: 8px; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; }
td { padding: 8px; background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; }
tr:hover td { background: #d0dafd; color: #339; }
.editar {color: blue; cursor:pointer;}
#contenedorForm {margin-left: 45px; font-size:12px;}
.boton { color: black; padding: 5px; margin: 10px; background-color: #b9c9fe; font-weight: bold; } |
Archivo functions.js:
|
/*Curso JavaScript aprenderaprogramar.com */ var editando=false;
function transformarEnEditable(nodo){ //El nodo recibido es SPAN if (editando == false) { var nodoTd = nodo.parentNode; //Nodo TD var nodoTr = nodoTd.parentNode; //Nodo TR var nodoContenedorForm = document.getElementById('contenedorForm'); //Nodo DIV var nodosEnTr = nodoTr.getElementsByTagName('td'); var alimento = nodosEnTr[0].textContent; var calorias = nodosEnTr[1].textContent; var grasas = nodosEnTr[2].textContent; var proteina = nodosEnTr[3].textContent; var carbohidratos = nodosEnTr[4].textContent; var opciones = nodosEnTr[5].textContent; var nuevoCodigoHtml = '<td><input type="text" name="alimento" id="alimento" value="'+alimento+'" size="10"></td>'+ '<td><input type="text" name="calorias" id="calorias" value="'+calorias+'" size="5"</td>'+ '<td><input type="text" name="grasas" id="grasas" value="'+grasas+'" size="5"</td>'+ '<td><input type="text" name="proteina" id="proteina" value="'+proteina+'" size="5"</td>'+ '<td><input type="text" name="carbohidratos" id="carbohidratos" value="'+carbohidratos+'" size="5"</td> <td>En edición</td>';
nodoTr.innerHTML = nuevoCodigoHtml;
nodoContenedorForm.innerHTML = 'Pulse Aceptar para guardar los cambios o cancelar para anularlos'+ '<form name = "formulario" action="http://aprenderaprogramar.com" method="get" onsubmit="capturarEnvio()" onreset="anular()">'+ '<input class="boton" type = "submit" value="Aceptar"> <input class="boton" type="reset" value="Cancelar">'; editando = "true";} else {alert ('Solo se puede editar una línea. Recargue la página para poder editar otra'); } }
function capturarEnvio(){ var nodoContenedorForm = document.getElementById('contenedorForm'); //Nodo DIV nodoContenedorForm.innerHTML = 'Pulse Aceptar para guardar los cambios o cancelar para anularlos'+ '<form name = "formulario" action="http://aprenderaprogramar.com" method="get" onsubmit="capturarEnvio()" onreset="anular()">'+ '<input type="hidden" name="alimento" value="'+document.querySelector('#alimento').value+'">'+ '<input type="hidden" name="calorias" value="'+document.querySelector('#calorias').value+'">'+ '<input type="hidden" name="grasas" value="'+document.querySelector('#grasas').value+'">'+ '<input type="hidden" name="proteina" value="'+document.querySelector('#proteina').value+'">'+ '<input type="hidden" name="carbohidratos" value="'+document.querySelector('#carbohidratos').value+'">'+ '<input class="boton" type = "submit" value="Aceptar"> <input class="boton" type="reset" value="Cancelar">'; document.formulario.submit(); }
function anular(){ window.location.reload(); } |
Revisa el código propuesto, ejecútalo en tu navegador y comprueba su funcionamiento. Aunque usamos algunos elementos novedosos como el evento onreset o la invocación window.location.reload(), debes ser capaz de comprender el código HTML, CSS y JavaScript, así como todos los procesos que tienen lugar y cómo se controla el flujo de la aplicación y los cambios que tienen lugar dinámicamente. Si tienes dudas, consulta en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
