Este es el ultimo capitulo del curso básico de javascript, y para festejar que después de 9 capítulos ya somos principiantes con javascript, realizaremos un ejercicio que prometo les servirá en su vida diaria como desarrolladores, vamos a crear objetos HTML desde javascript, y para comprender la creación de objetos dinámicos, crearemos un formulario detalle. Si te preguntas que diablos es un formulario detalle, simplemente imagina cuando vas al súper mercado a comprar productos, y en la caja registradora mientras agregan los productos estos van agregándose a una tabla, pues eso es un formulario Maestro Detalle, pero nos enfocaremos solamente en el Formulario Detalle que prácticamente es lo difícil del asunto.
A continuación esta el ejemplo del formulario con el cual pueden jugar y ejecutarlo para que vean de que se trata:
Ahora vamos a lo divertido, como hacerlo. Para comenzar veamos el código HTML que es el siguiente:
<div id="tutorial"> <div > <div class="bloque"> <label>Código</label> <input type="text" id="txtCodigo" value="" /> </div> <div class="bloque"> <label>Nombre</label> <input type="text" id="txtNombre" value="" /> </div> <div class="bloque"> <label>Precio</label> <input type="text" id="txtPrecio" value="" /> </div> <div class="bloque"> <input value="Agregar" type="button" onclick="Agrega()" /> </div> <div style="clear:both"></div> </div> <div> <table style="width:400px;" id="tablaProductos"> <tr> <th>Código</th> <th>Nombre</th> <th>Precio</th> <th>X</th> </tr> </table> </div> </div>
Tenemos dos partes encerradas en dos divs(<div>), una es la que contiene los input para la captura del detalle y un botón de agregar que ejecuta una función javascript de nombre Agregar(), y tenemos 3 input de tipo text, en los cuales introduciremos valores.
En la segunda parte tenemos una tabla de id tablaProductos, y con unos encabezados relacionados a nuestras cajas de texto, y es fácil intuir que en esta tabla es donde agregaremos las filas de nuestros productos.
Ahora veamos la función Agregar antes mencionada:
function Agrega(){
//obtenemos los valores de nuestra caja de texto
var codigo=document.getElementById("txtCodigo").value;
var nombre=document.getElementById("txtNombre").value;
var precio=document.getElementById("txtPrecio").value;
//creamos un objeto tr que anexaremos a nuestra tabla llamada tableProductos
var TR= document.createElement("tr");
//creamos 4 elementos td en donde iran los datos y uno cuarto donde ira un boton para eliminar
var TD1=document.createElement("td")
var TD2=document.createElement("td")
var TD3=document.createElement("td");
var TD4= document.createElement("td")
//asignamos los valores a nuestros td por medio del atributo innerHTML, el cual tiene el contenido HTML de un Nodo
TD1.innerHTML=codigo;
TD2.innerHTML=nombre;
TD3.innerHTML=precio;
//A continuación asignamos contenido html a nuestro cuarto td
//esta es una forma de crear elementos tambien, dando el codigo html a un Nodo
TD4.innerHTML="<input type='button' value='Eliminar' onclick='Elimina(this)'>"
//Ahora proseguimos a agregar los hijos TD al Padre TR
//Esta es otra manera de crear elementos HTML, por medio de el metodo appendChild
TR.appendChild(TD1);
TR.appendChild(TD2);
TR.appendChild(TD3);
TR.appendChild(TD4);
//Por ultimo asignamos nuestro TR a la tabla con id tablaProductos
document.getElementById("tablaProductos").appendChild(TR)
//limpiamos nuestros inputs para agregar ma datos, y ponemos el foco nuevamente en el input de codigo
document.getElementById("txtCodigo").value=""
document.getElementById("txtNombre").value="";
document.getElementById("txtPrecio").value="";
document.getElementById("txtCodigo").focus();
}
En la función anterior, esta comentada linea por linea a detalle, pero yo resumo breve mente a continuación:
- Obtenemos los valores de las cajas de texto y los guardamos en variables.
- Después creamos un Nodo tipo TR al cual asignaremos nuevos TD donde estarán nuestros valores.
- En seguida creamos 4 TDs, a los tres primeros TDs le asignamos nuestros valores, y al cuarto le asignamos en su atributo innerHTML un botón en código HTML, esta es una manera de crear Elementos HTML; tengamos cuidado y veamos que en el código de nuestro botón invocamos una función en el onclick, la cual tiene nombre Eliminar() (veremos su código más adelante), esta función le enviamos el mismo Nodo botón con la palabra this.
- A continuación observamos otra manera la cual es utilizando el método appendChild, con este método agregamos los TDs al TR.
- Luego agregamos de la misma manera con el método appendChild el nuevo TR a la tabla de id tablaProductos.
- Por último limpiamos las cajas de texto y ponemos el foco con la función focus() de javascript en la primer caja de texto.
Ahora veamos el código de la función Eliminar que invoca el botón que creamos dinámicamente en el código anterior.
function Elimina(NodoBoton){
//recibimos el boton como parametro, obtendremos el tr que lo contiene de la siguiente manera
//Como nuestro boton es hijo de un td, y este td de el tr, debemos invocar dos veces parentNode
//Esto para llegar a tener el TR
var TR= NodoBoton.parentNode.parentNode;
//ahora que ya tenemos el padre TR, podemos eliminarlo de la siguiente manera
//junto a todos sus hijos
document.getElementById("tablaProductos").removeChild(TR);
}
Esta funcion simplemente recibe el botón mismo que la invoco como parámetro, recordemos que enviamos el botón con la palabra this; y ya teniendo este botón por medio de el atributo parentNode obtenemos su padre que es el TD que lo contiene, y nuevamente por el atributo parentNode ahora obtenemos el TR, el padre de los elementos que agregamos dinámicamente, ahora con la función removeChild, mandamos el TR haciendo referencia a la tabla de productos por medio de su id (tablaProductos), y con eso es suficiente para eliminar la fila del producto deseado.
Este es el capítulo final de este pequeño curso básico de javascript, espero le saquen provecho y valga la pena el haberlo hecho.
Ir Capítulo Anterior (9.- Modificación de elementos HTML con Javascript)