En este capitulo (y el ultimo de este curso), veremos cómo crear elementos HTML de forma dinámica y con la ayuda de jquery (podría también ser de interés ver como se realiza esto sin jquery, con javascript puro en otro artículo que hice hace tiempo).
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.
El código es el siguiente:
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>Untitled Document</title>
<script src="../scripts/jquery.js"></script>
<style>
#tutorial .bloque{
float:left;
width:110px;
}
#tutorial input,#tutorial label{
font-size:11px;
width:60px;
}
#tablaProductos,#tablaProductos td,#tablaProductos th{
border:1px solid #333;
border-collapse:collapse;
}
#tableProductos th{
width:100px;
}
</style>
</head>
<body>
<div id="tutorial">
<div >
<div class="bloque">
<label>Código</label>
<input class="texto" type="text" id="txtCodigo" value="" />
</div>
<div class="bloque">
<label>Nombre</label>
<input class="texto" type="text" id="txtNombre" value="" />
</div>
<div class="bloque">
<label>Precio</label>
<input class="texto" 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>
</body>
</html>
Código Jquery
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.