$(document).ready(function(){
//selector de imagenes a aplicar la funcionalidad de click
$("#thumbs img").click(function(){
//obtenemos la imagen a mostrar
urlImagenGrande=$(this).data("img");
//asignamos la imagen por medio de prop
$("#imagenGrande").prop("src",urlImagenGrande);
})
});
Utilizando la propiedad prop procedemos a cambiar el atributo src de img al momento que se da clic en la miniatura. De esta manera queda la funcionalidad dinámica gracias al selector de jquery ($(“#thumbs img”)).
Para crear elementos HTML dinámicamente utilizaremos la función de nombre append() de jquery, esta función agrega contenido HTML o un Nodo Html al final de su contenido, y para el caso contrario (eliminar elementos) utilizaremos la función remove() la cual elimina un elemento del contenido de la pagina.
Para comprender estas funciones veremos cómo hacer un formulario detalle (como cuando vas a la tienda y ves como te agregan los productos que vas a pagar a una tabla), y la manera que jquery con la ayuda de sus selectores y su catálogo de funciones lo hace demasiado fácil de hacer.
function Agrega(){
//obtenemos los valores de nuestra caja de texto
nodoAInsertar="<tr>"; //nodo en el cual obtendremos el codigo html nuevo a insertar en la tabla
$(".texto").each(function(){ //selector por clase texto y un each para recorrer elementos
nodoAInsertar+="<td>"; //abrimos td
nodoAInsertar+=$(this).prop("value"); //obtenemos el valor de la caja de texto
nodoAInsertar+="</td>" //cerramos td
//limpiamos la caja de texto actual
$(this).val("");
});
//agregamos el botpon para eliminar
nodoAInsertar+="<td><input type='button' value='Eliminar' onclick='Elimina(this)'></td>"
nodoAInsertar+="</tr>" //cerramos el tr
//por ultimo insertamos el nodo tr a la tabla
$("#tablaProductos").append(nodoAInsertar)
//ponemos el foco en la caja de texto código
$("#txtCodigo").focus()
}
function Elimina(NodoBoton){
//recibimos el botón como parametro y lo transformamos a jquery
var botonEliminar=$(NodoBoton);
//obtenemos el padre tr del boton para asi eliminarlo, el primer padre es td, el segundo es tr
var padreTRBoton=$(botonEliminar).parent().parent();
padreTRBoton.remove();
//todo esto puede funcionar con esta misma linea "$(NodBoton).parent().parent().remove();"
}
Código en ejecución
Tenemos tres cajas de texto y un botón, al presionar el botón invocamos la función Agrega() la cual realiza un each sobre los elementos de clase “texto” y les da un formato de celda (<td>) y concatenándolos a una variable de nombre nodoAInsertar, al finalizar el ciclo agregamos un botón, tal como lo haríamos con html, y en este botón agregamos la función Elimina() recibiendo como parámetro el mismo botón. Por último utilizando la función append() de jquery anexamos el nuevo código html a la tabla con el id tablaProductos, y así de sencillo se realiza la creación de elementos HTML de forma dinámica.
Para el caso de eliminar simplemente utilizamos la función remove() de jquery, relacionando al padre tr del botón recibido, y proseguimos a eliminar el tr junto a sus hijos.
Este fue el ultimo capitulo de este curso básico de jquery, después de ver estos 10 temas, ya eres capaz de utilizar jquery sin problemas y espero te sirva para que sea una herramienta que te ayude a realizar tus proyectos de manera rápida y estética.
