find archivos -

¿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 []

7.- Las funciones Show y Hide – Curso Básico de #Jquery #7

En jquery existen dos funciones, las cuales utilizaremos continuamente, su nombre son hide() y show(), estas funciones como su nombre lo indica, ocultan y muestran un elemento.

La funcionalidad que se puede realizar, es ilimitada, basta con tener imaginación y podremos realizar cosas bastante estéticas; para utilizarla, seleccionamos el o los elementos que deseamos aplicar la función por medio de un selector y al igual que todas las funciones de jquery continuamos con punto y el nombre de la función, por ejemplo:

$("div").show();

Así de sencillo es su sintaxis, y esta linea ocultaría todos los divs de nuestra pagina; pero para sacarle jugo a estas funciones vamos a realizar algo mas interesante, realizaremos un acordeón, para ello tenemos el siguiente código:

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>show hide</title>
<script src="../scripts/jquery.js"></script>
</head>
<style>
#acordeon{
width:500px;
border:1px solid #777;
}

.titulo{
background:#CCC;
cursor:pointer;
padding:3px;
border-bottom:1px solid #666;
}

.texto{
padding:5px;
}
</style>
<div id="acordeon">
<div >
<div class="titulo">Sección 1</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
<div>
<div class="titulo">Sección 2</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
<div>
<div class="titulo">Sección 3</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
<div>
<div class="titulo">Sección 4</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
</div>

<body>

</body>
</html>

Código Jquery

$(document).ready(function(){
//agregamos evento clic a los titulos

$(".titulo").click(function(){
//obtenemos el objeto jquery que ejecuto el evento
divTitulo=$(this);

//ocultamos todos los div con clase texto
$(".texto").hide();

//mostramos el div correspondiente a la sección
divTitulo.parent().find(".texto").show();
});

//ocultamos todos los divs de clase texto al iniciar
$(".texto").hide();
});

En el código anterior, tenemos un conjunto de divs los cuales tienen una clase llamada sección y una llamada texto, los divs de clase sección realizaran la función que activa la sección del texto del acordeón el cual se encuentra en el div de clase texto.

En el código de jquery, agregamos un evento a los divs de clase sección para cuando den clic en ellos se muestre el div correspondiente y se oculten todos los demás, utilizando la función parent() y find() de jquery (las cuales explico en este articulo), accedemos a el elemento correspondiente a mostrar.

A continuación dejo el ejemplo funcionando, solo den clic a una sección y verán su funcionalidad:

En este capitulo vimos como podemos hacer un uso interesante por medio de las funciones hide() y show() de jquery.

Ir al Capitulo Siguiente (8.- Callbacks).

Ir al Capitulo Anterior (6.- Eventos).

¿Cómo utilizar los métodos #parent() y #find() de #jquery? #ejemplos

Este articulo trata sobre los métodos parent() y find() de jquery. Estos métodos son demasiado poderosos cuando se manejan de manera adecuada, ya que se puede navegar por medio de todo el contenido HTML de un sitio, y a su vez, realizar modificaciones dinámicas, o obtener algún elemento o un conjunto de estos para realizar alguna animación o calculo.

Para ver su funcionamiento utilizaremos el siguiente código HTML que describe un div padre con muchos hijos dentro los cuales llame de acuerdo a un árbol genealógico (padre, hijo, nieto, bisnieto).


<div id="divPadre">
   <div id="divHijoPrimero">
      <div id="divNietoPrimero">
         <div id="divBisnieto"></div>
      </div>
   </div>
   <div id="divHijoSegundo">
      <div id="divNietoSegundo"></div>
   </div>
</div>

Comenzaremos por seleccionar el div bisnieto con el siguiente selector:

obj=$("#divBisnieto");

Esto nos dará el objeto divBisnieto, pero supongamos que quisiéramos obtener el div padre (osea el div que contiene a los demás), para ello utilizaremos el método parent() de jquery de la siguiente manera:

//tres veces parent nos sacaría hasta el div padre, el cual contiene a los demás divs
obj=$("#divBisnieto").parent().parent().parent();

Como podemos observar cada que utilizamos el método parent() lo que hacemos es dirigirnos al padre inmediato del objeto HTML que tenemos en el selector.

Ahora supongamos que teniendo el divBisnieto seleccionado queramos seleccionar un elemento fuera del padre inmediato de divBisnieto, por ejemplo el div con id divNietoSegundo, para ello utilizaremos el método find() el cual al contrario de parent() nos permite realizar una selección sobre los elementos dentro de un objeto ya seleccionado anteriormente, y lo hacemos de la siguiente manera:

//tres veces parent nos sacaría hasta el div padre, el cual contiene a los demás divs
obj=$("#divBisnieto").parent().parent().parent();

//y ya teniendo en la variable obj el padre de todos los divs utilizamos find
objDivNietoSegundo=obj.find("#divNietoSegundo")

Recuerden que pueden utilizar el método find() de igual manera que los selectores comunes $() con la diferencia que solo abarcara los elementos hijos del selector ya utilizado.

Espero les sirva este rápido tutorial y utilicen estos métodos ya que pueden hacer cosas muy interesantes.