¿Cómo funciona la función closest() de jquery? #ejemplos #jquery

La función closest de jquery, sirve para seleccionar un padre de un elemento que coincida con el selector dado.
A diferencia de parent() (ver como funciona parent()), esta función nos permite ir hasta el nivel deseado ya sea por una clase, id o el nombre de la etiqueta.

Su funcionalidad es parecida a find() (ver cómo funciona find()) solo que funciona en sentido inverso, yendo a los padres en lugar de a los hijos.

Esta función solo nos seleccionara el primer elemento encontrado con el selector dado.
A continuación muestro un ejemplo de como funciona closest():

Código HTML

<div class="abuelo">
  <div>
    <input id="hijo1" type="text" value="Soy el hijo 1" />

    <input id="hijo2" type="text" value="Soy el hijo 2" />
  </div>
</div>

Código Jquery

$(document).ready(function(){
		//asi seleccionamos el hijo1
		hijo1=$("#hijo1");

		//de esta manera podemos seleccionar a padre por medio de closest()
		padre=hijo1.closest("div");

		//mostramos el contenido html para confirmar que seleccionamos el div padre
		alert(padre.html())

		//asi seleccionamos al abuelo mediante su clase
		abuelo=hijo1.closest(".abuelo")

		//mostramos html del abuelo
		alert(abuelo.html())
	})

¿Cómo seleccionar una columna en especifico de toda la tabla con jquery? #eq

Algunas veces, por comodidad, o por que no queda de otra, se nos ocurre realizar alguna operación con todas las celdas de una columna de una tabla de jquery, es decir, poder seleccionar la primer columna y todas sus celdas, o la segunda columna etc, y a estos elementos realizar una acción. Para ello pongo el siguiente ejemplo:

Teniendo la siguiente tabla:

<table id="miTabla">
	<tr>
		<td>pato</td>
		<td>12</td>
	</tr>
	<tr>
		<td>pato</td>
		<td>1</td>
	</tr>
	<tr>
		<td>pato</td>
		<td>15</td>
	</tr>
	<tr>
		<td>pato</td>
		<td>16</td>
	</tr>
<table>

Supongamos que deseamos realizar una sumatoria de los valores de la segunda columna, para ello la clave esta en el selector junto al filtro eq, y se puede hacer de la siguiente manera:

var total=0;

//selector &gt;&gt;  $("#GridView1 tr").find('td:eq(1)')
//De esta manera utilizando eq seleccionamos la segunda fila, ya que la primera es 0
$("#miTabla tr").find('td:eq(1)').each(function () {

 //obtenemos el valor de la celda
  valor = $(this).html();

 //sumamos, recordar parsear, si no se concatenara.
 total += parseInt(valor)
})

//mostramos el total
alert(total)

Así de sencillo seleccionamos una columna en especifico.

Nota: eq sirve para seleccionar un indice de los elementos seleccionados, como en un arreglo los corchetes []

¿Cómo obtener el texto de un option en un select con jquery? #combobox #texto #jquery

Alguna veces es necesario obtener el texto de un elemento option(El texto visual, no el valor), el cual esta seleccionado en un elemento select(combobox), esto se puede hacer de la siguiente forma, ayudándonos de jquery:

Codigo HTML

<select id="miSelect">
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option selected value="3">Tres</option>
    <option value="4">Cuatro</option>
    <option value="5">Cinco</option>
</select>

Codigo Jquery


$( "#miSelect option:selected" ).text();

5.- Polimorfismo – Curso de Programación Orientada a Objetos en 10 Minutos #5

El polimorfismo (palabra rara), es la manera de invocar una acción a que tenga distintos comportamientos dependiendo del contexto con el que se utiliza. Más simple. El polimorfismo es la posibilidad que un método (función) pueda tener distinto comportamiento a partir de los parámetros que se envían (sobrecarga), o a partir de la manera que se invoca (sobreescritura).

El término es un poco complicado, y es un problema para todos los que desean aprender Programación Orientada a Objetos, pero en realidad, es más fácil de lo que se escucha, y para ello veamos primero que es la sobrecarga.

Sobreescritura

Cuando utilizamos la herencia, al heredar de una clase podemos utilizar sus métodos (siempre y cuando no estén protegidos, mas adelante veremos eso), y puede haber ocasiones en las cuales el método del padre no sea de nuestra utilidad y debamos crear uno nuevo con el mismo nombre, para ello utilizamos la Sobreecritura.

Veamos el siguiente ejemplo con las clases del capítulo anterior:

Clase Transporte

 public class Transporte
    {
        public int velocidadMaxima = 0;
        public int pasajeros = 0;

        public virtual void Camina()
        {
            //definición del metodo camina
            Console.WriteLine("metodo llamado desde transporte");
        }

    }

Clase Auto

    public class Auto : Terrestre
    {
        public int puertas = 0;

        public Auto(int pasajeros,int velocidadMaxima,int numeroLlantas, int puertas)
        {
            //atributos de la clase Transporte
            this.pasajeros = pasajeros;
            this.velocidadMaxima = velocidadMaxima;

            //atributos de la clase Terrestre
            this.numeroLlantas = numeroLlantas;

            //atributos de esta clase
            this.puertas = puertas;
        }

        public override void Camina()
        {
            Console.WriteLine("Metodo llamado desde clase Auto");
        }

    }

Para utilizar la sobreescritura debemos definir el método del padre con la palabra virtual o abstract , y esto permitirá que podamos remplazarlo por medio del hijo. Para remplazarlo en el hijo utilizamos la palabra reservada override, y con eso se remplaza el método, y cuando utilicemos la función utilizaremos la del Hijo.

Nota: cuando utilizamos abstract nos referimos a un método abstracto, el cual no puede ser utilizado, en cambio virtual si puede ser utilizado, igual lo veremos en el capítulo de abstracción a más detalle.

Sobrecarga

Existen ocasiones en las cuales un método pueda tener varias funciones dependiendo el contexto que se envía, para ello existe la Sobrecarga, la cual nos permite crear métodos con el mismo nombre, solo basta con que reciban distintos parámetros, y con ello en la ejecución se llama el adecuado.

Para ello veamos el siguiente ejemplo con las clases del capitulo anterior:

Clase Auto

public class Auto : Terrestre
    {
        public int puertas = 0;

        public Auto(int pasajeros,int velocidadMaxima,int numeroLlantas, int puertas)
        {
            //atributos de la clase Transporte
            this.pasajeros = pasajeros;
            this.velocidadMaxima = velocidadMaxima;

            //atributos de la clase Terrestre
            this.numeroLlantas = numeroLlantas;

            //atributos de esta clase
            this.puertas = puertas;
        }

        public override void Camina()
        {
            Console.WriteLine("Metodo llamado desde clase Auto");
        }

        //metodo sobrecargado
        public void Camina(int metros)
        {
            Console.WriteLine("Metodo que recibe un entero "+metros);
        }
    }

Y por ultimo utilizando el siguiente código, podemos crear nuestro objeto Auto y este puede invocar los dos métodos Camina, y dependiendo al parámetro se ejecuta el adecuado.

 class Program
    {
        static void Main(string[] args)
        {

            //Clase Auto utilizando sobreescritura y sobrecarga
            Auto miCarro = new Auto(4, 200, 4, 4);

            //sobreescritura
            miCarro.Camina();

            //sobrecarga
            miCarro.Camina(1);

        }
    }

Ir Capítulo Siguiente (6.- Abstracción en la programación)

Ir Capítulo Anterior (4.- Herencia)

4.- Herencia – Curso de Programación Orientada a Objetos en 10 Minutos #4

En la Programación Orientada a Objetos, existe un concepto con el cual podemos tener un gran potencial a la hora de realizar grandes sistemas, su nombre es La Herencia.

La herencia en POO, nos sirve para organizar nuestra lógica en la creación de clases, ahorrar métodos, y tener una manera abstracta de programar.

Una descripción sencilla de Herencia es: La creación de una clase a partir de una ya existente (clase padre), teniendo la clase nueva la funcionalidad de su padre (dependiendo de su encapsulamiento, lo veremos en los próximos capítulos), y a la cual se le pueden crear nuevos métodos y atributos. Esto nos permite ahorrar código y no repetirlo; si una clase que ya creamos hace lo que deseamos pero aparte tenemos la necesidad de nueva funcionalidad, utilizamos la herencia.

Veamos el siguiente ejemplo, en el cual utilizo los medios de transporte, y como organizaríamos algo rápido para crear una clase auto:

diagrama clases auto

Cada cuadro representa una Clase, en la parte superior tenemos la clase padre Transporte, de la cual heredan la clase Marino, Terrestre y Aéreo, a su vez tenemos una clase de nombre Auto la cual hereda de la clase Terrestre. Y para ver un poco de las ventajas, cuando programamos esto, veamos las 5 clases a continuación.

Clase Transporte

   class Transporte
    {
        public int velocidadMaxima = 0;
        public int pasajeros = 0;

        public void camina()
        {
            //definición del metodo camina
        }

    }

Clase Terrestre

  class Terrestre : Transporte
   {
      public int numeroLlantas = 0;
   }

Clase Aéreo

 class Aereo : Transporte
    {
        public int numeroAlas = 0;
    }

Clase Marino

   class Marino : Transporte
    {
        public int numeroHelices = 0;
    }

Clase Auto

  class Auto : Terrestre
    {
        public int puertas = 0;

        public Auto(int pasajeros,int velocidadMaxima,int numeroLlantas, int puertas)
        {
            //atributos de la clase Transporte
            this.pasajeros = pasajeros;
            this.velocidadMaxima = velocidadMaxima;

            //atributos de la clase Terrestre
            this.numeroLlantas = numeroLlantas;

            //atributos de esta clase
            this.puertas = puertas;
        }
    }

Podemos observar que las clases que son hijas en el momento de definirías tenemos dos puntos(:) seguido de la clase que heredan, de esta manera realizamos la Herencia.

Ahora veamos cómo se utiliza como instancia el auto y sus métodos heredados:

   class Program
    {
      static void Main(string[] args)
        {
            //Clase Auto utilizando herencia
            Auto miCarro = new Auto(4, 200, 4, 4);
            miCarro.camina();

        }
   }

Estoy utilizando el método camina(), el cual está definido en la clase Transporte, de esta manera podemos reutilizar código sin volverlo a copiar o rehacer, pero esto no es todo, en los siguientes capitulo veremos más cosas útiles que se pueden realizar con la POO (Programación Orientada a Objetos).

Ir Capítulo Siguiente (5.- Polimorfismo (Sobrecarga y Sobreescritura))

Ir Capítulo Anterior (3.- Constructor)

3.- Constructor – Curso de Programación Orientada a Objetos en 10 Minutos #3

Un constructor nos sirve para crear un objeto, es un método especial el cual no regresa un valor y tiene el mismo nombre de la clase; cada que creamos un objeto utilizamos la palabra new seguido del nombre de la clase, en ese momento estamos invocando el constructor; se preguntaran como invocamos el constructor en el capitulo anterior si no lo definimos, pues, existe un constructor por defecto el cual no recibe ningún parámetro y así si no definimos constructor ya existe uno es por eso que podemos invocar un constructor sin parámetros aunque no lo hayamos definido.

Los constructores pueden ser mas de uno en la misma clase, siempre y cuando reciban distintos parámetros.

Pero la duda que sale ahora es: ¿Para que me sirve un constructor?, sencillamente para obligar que en la creación de un objeto se reciban ciertos parámetros necesarios y así evitar que nuestro objeto funcione mal, por ejemplo veamos el código del capítulo anterior donde creamos una galleta:

 

class Galleta {
    public int cantidadHarina;
    public int cantidadDeAgua;
    public int tiempoDeHorneado;
    public string nombreGalleta;

    private int tiempoHorneada;

    public void Hornear() {
        for (int i = 0; i < tiempoDeHorneado; i++) {
            tiempoHorneada++;
        }
        System.Console.WriteLine("Horneada la galleta");
    }
}

Si vemos este código, que pasaría si yo no defino el atributo tiempoDeHorneado y después invoco el método Hornear(), simplemente no tendría una funcionalidad definida ya que mi atributo no valdría nada por lo cual no se hornearía. Para ello cambiemos el código para que obliguemos al programador a enviar ese atributo, de la siguiente manera:

 class Galleta
    {
        public int cantidadHarina;
        public int cantidadDeAgua;
        public int tiempoDeHorneado;
        public string nombreGalleta;

        private int tiempoHorneada;

        //constructor
        public Galleta(int tiempoDeHorneado)
        {
            this.tiempoDeHorneado = tiempoDeHorneado;
        }

        public void Hornear()
        {
            for (int i = 0; i &lt; tiempoDeHorneado;i++ )
            {
                tiempoHorneada++;
            }
            System.Console.WriteLine("Horneada la galleta");
        }
    }

En este código vemos que agregue un nuevo método de nombre Galleta y el cual recibe un entero, también utilizo la palabra reservada this, esta palabra nos sirve para indicar que estamos haciendo referencia a la variable de la clase, y si vemos recibimos una variable de mismo nombre, si no utilizamos la palabra this, hacemos referencia a la que recibimos como argumento, y lo que hago es simplemente darle el valor que recibo a mi atributo de la clase Galleta, y así poder utilizarlo dentro de mis métodos.

Nota: Cuando se define un constructor, el constructor por defecto ya no existe y obligamos a utilizar solo los constructores que existen en nuestra clase (ya no podemos utilizar Galleta() sin parámetros ya que definí un constructor con parámetro).

Y a continuación les muestro la forma en cómo utilizaríamos el constructor, y es la siguiente:

 class Program
    {
        static void Main(string[] args)
        {
            Galleta miGalleta = new Galleta(100);
            miGalleta.nombreGalleta = "chocochips";
            miGalleta.cantidadDeAgua = 10;
            miGalleta.cantidadHarina = 10;
            miGalleta.Hornear();

            //linea para poder ver el texto de el metodo hornear
            Console.ReadLine();
        }
    }

Cuando creamos un proyecto tipo consola en Visual Studio, la clase Program se crea por defecto y esta contiene el método Main, el cual es el que se ejecuta cuando corremos el proyecto.

Recuerda que puedes definir muchos más constructores siempre y cuando tengan distintos parámetros ya sea en cantidad de estos o distinto tipo de dato. Por ejemplo podríamos crear un constructor para obligar a que el programador envié el nombre, la cantidad de harina y la cantidad de agua, y ya decida cual utilizar, y para ello nos quedaría nuestra clase Galleta de la siguiente forma:

 class Galleta
    {
        public int cantidadHarina;
        public int cantidadDeAgua;
        public int tiempoDeHorneado;
        public string nombreGalleta;

        private int tiempoHorneada;

        //constructor
        public Galleta(int tiempoDeHorneado)
        {
            this.tiempoDeHorneado = tiempoDeHorneado;
        }
        //constructor 2
        public Galleta(int tiempoDeHorneado,string nombreGalleta,int cantidadHarina, int cantidadDeAgua)
        {
            this.tiempoDeHorneado = tiempoDeHorneado;
            this.nombreGalleta = nombreGalleta;
            this.cantidadHarina = cantidadHarina;
            this.cantidadDeAgua = cantidadDeAgua;
        }

        public void Hornear()
        {
            for (int i = 0; i &lt; tiempoDeHorneado;i++ )
            {
                tiempoHorneada++;
            }
            System.Console.WriteLine("Horneada la galleta");
        }
    }

Ir Capítulo Siguiente (4.- Herencia)

Ir Capítulo Anterior (2.- Clases y Objetos)

2.- Clases y Objetos – Curso de Programación Orientada a Objetos en 10 MINUTOS #2

En la Programación Orientada a Objetos existen dos conceptos que son los principales, los cuales siempre que se hable de este paradigma no se pueden evitar, y hablo de las clases y los objetos.

Una clase se es la entidad en la cual definimos el comportamiento y la definición de un objeto.

Un objeto es una instancia de una clase, es la entidad tangible que contiene los valores y realiza las acciones.

Una clase contiene atributos y métodos con los cuales identificamos a nuestro objeto. El objeto al crearse adquiere todas estas características y funcionalidades y puede hacer uso de ellas.

En palabras más simples, una clase es el molde con el cual creamos un objeto en específico. Por ejemplo:

class MiObjeto(){
    //código aqui
}

Deseamos crear un objeto tipo galleta, sabemos que las galletas tienen una forma, un sabor, un tiempo de horneado, una cantidad de harina, agua y muchas otras cosas. Para crear este objeto necesitaremos de una clase la cual sea el molde de estas galletas que vamos a crear, y para ello recurrimos a crearla con la siguiente sintaxis en c#  (cree un proyecto tipo Aplicación de Consola en Visual Studio):

 class Galleta
    {
        public int cantidadHarina;
        public int cantidadDeAgua;
        public int tiempoDeHorneado;
        public string nombreGalleta;

    }

La palabra class nos indica que es una clase, y dentro de esta tenemos atributos(los cuales no son todos los de una galleta  pero nos sirve para entender de que se trata), los atributos son 3 enteros que indican la cantidad de harina, cantidad de agua, y el tiempo de horneado, y también tenemos un atributo tipo cadena que nos indica el nombre de nuestra galleta (chocochips, animalito, emperador).

Nota: la palabra public y private mas adelante las explicare, por ahora no tienen mucha importancia.

Pero una galleta también tiene acciones, por lo menos en su preparación y para ello necesitamos de métodos, ahora la clase le agrego el método hornear() y quedaría de la siguiente forma:

 class Galleta
    {
        public int cantidadHarina;
        public int cantidadDeAgua;
        public int tiempoDeHorneado;
        public string nombreGalleta;

        private int tiempoHorneada;

        public void Hornear()
        {
            for (int i = 0; i &lt; tiempoDeHorneado;i++ )
            {
                tiempoHorneada++;
            }
            System.Console.WriteLine("Horneada la galleta");
        }
    }

Agregue un nuevo atributo (tiempoHorneada) para saber cuánto tiempo lleva horneada y cómo podemos ver hay un método el cual es un ciclo for el cual depende de el atributo tiempoDeHorneado.

Ya tenemos nuestra clase ahora veamos cómo se utiliza para crear un objeto y es de la siguiente manera:


  //creamos el objeto
  Galleta miGalleta = new Galleta();

  //agregamos sus valores a los atributos
  miGalleta.nombreGalleta = "chocochips";
  miGalleta.tiempoDeHorneado = 100;
  miGalleta.cantidadDeAgua = 10;
  miGalleta.cantidadHarina = 10;

  //horneamos la galleta invocando el metodo hornear()
  miGalleta.Hornear();

Como pudimos observar la creación de un objeto simplemente se realiza con el nombre de nuestra clase seguido del nombre que deseamos agregar a nuestra instancia (objeto) y seguido de el símbolo = (igual) y la palabra new mas el nombre de nuestro objeto nuevamente seguido de paréntesis. En el siguiente tema (constructores) veremos que significa la palabra new y por qué se pone el nombre de nuestro objeto seguido de paréntesis para la creación de un objeto.

Ir Capítulo Siguiente (3.- Constructor)

Ir Capítulo Anterior (1.- Introducción a La Programación Orientada a Objetos (POO))

1.- Introducción a la Programación Orientada a Objetos (POO) – Curso de Programación Orientada a Objetos en 10 Minutos #1

La Programación Orientada a Objetos (POO así la abreviaremos) nace por la necesidad de representar el mundo en el que habitamos (junto a sus problemas) por medio de objetos como nosotros los percibimos, con sus propiedades y funcionalidades, de esta forma es más fácil para los programadores organizar su código y tener una manera elegante con la cual realizar los sistemas. Uno de los lemas de este paradigma de programación es: “divide y vencerás”, lo cual nos da a entender que no tenemos que llenar líneas y líneas de códigos con funciones y perder el hilo de lo que estamos haciendo (como solía ser en la programación estructurada), si no que organizamos los objetos del sistema de forma abstracta junto a las acciones que pueden hacer y las iteraciones que tienen con los demás objetos.

Para darnos una idea rápida de que trata este paradigma, imaginemos que deseamos representar un medio de transporte (avión, barco, automóvil), el sentido común del humano rápidamente nos dice que nos sirve para trasladarnos, que se mueve a cierta velocidad, que frena, que tiene pasajeros, ruedas, alas o hélices, y de manera fácil podemos listar todas sus acciones y propiedades, siendo las acciones el moverse y el frenar, siendo las propiedades: el número de pasajeros, el numero de ruedas, numero de hélices etc.

Con la POO representamos rápidamente estos objetos del mundo real por medio de clases que nos sirven de moldes para crear los objetos que tendrán funcionalidad en nuestros sistemas.

Para ello pasemos de la teoría a la práctica y comencemos a entender rápidamente este paradigma y sus ventajas en el siguiente capitulo.

Ir Capítulo Siguiente (2.- Clases y Objetos)

Curso de Programación Orientada a Objetos en 10 Minutos

Este curso, me basare en una descripción del paradigma Orientado a Objetos, general y brevemente, y te prometo que en menos de 10 minutos habrás comprendido lo mas importante de esta forma de programación.

Para el curso utilizo el lenguaje de programación C# .Net, el cual es fácil de comprender (por si nunca lo han utilizado) y solo servirá para explicar el paradigma, no para que aprendan C#.

El curso consta de los siguientes capítulos:

1.- Introducción a la Programación Orientada a Objetos (POO)

2.- Clases y Objetos

3.- Constructor

4.- Herencia

5.- Polimorfismo (Sobrecarga y Sobreescritura)

6.- Abstracción en la Programación

10.- Creación de Elementos HTML con Jquery – Curso Básico de #Jquery #10

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="&lt;tr&gt;"; //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+="&lt;td&gt;"; //abrimos td

		nodoAInsertar+=$(this).prop("value"); //obtenemos el valor de la caja de texto

		nodoAInsertar+="&lt;/td&gt;" //cerramos td

		//limpiamos la caja de texto actual
		$(this).val("");
	});

	//agregamos el botpon para eliminar
	nodoAInsertar+="&lt;td&gt;&lt;input type='button' value='Eliminar' onclick='Elimina(this)'&gt;&lt;/td&gt;"
	nodoAInsertar+="&lt;/tr&gt;" //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.

Ir al  Capitulo Anterior (9.- La función Animate).