parent archivos -

Realizar una búsqueda en una columna en específico de una tabla con #jquery.

Para realizar una búsqueda en una columna en específico de una tabla podemos hacer uso del filtro eq que nos sirve para seleccionar el número de la columna de elementos, de esta manera podemos realizar la búsqueda solo por una columna en particular.

En el siguiente ejemplo muestro como se puede buscar un valor en la primera columna, y después obtener la fila entera (por medio de la función parent() de jquery) para mostrar su resultado (o lo que deseen hacer ustedes con esos datos).

En seguida muestro el ejemplo en el cual pueden ver el resultado, y debajo el código que hace posible esta funcionalidad:

Ejemplo:

Html


<label>Captura un código</label>
	<input type="text" id="busqueda"/>
    <input onclick="jsBuscar();" type="button" value="Buscar" /><br /><br />

    <table id="miTabla">
    	<tr>
        	<th>Codigo</th>
            <th>Nombre</th>
            <th>Edad</th>
        </tr>
        <tr>
        	<td>1</td>
            <td>Pedro</td>
            <td>34 años</td>
        </tr>
    	<tr>
        	<td>2</td>
            <td>Luis</td>
            <td>34 años</td>
        </tr>
        	<tr>
        	<td>3</td>
            <td>Juan</td>
            <td>15 años</td>
        </tr>
        	<tr>
        	<td>4</td>
            <td>Jesus</td>
            <td>20 años</td>
        </tr>
        	<tr>
        	<td>5</td>
            <td>Pablo</td>
            <td>23 años</td>
        </tr>
    </table>

    <div id="mostrarResultado">

    </div>

Jquery


//función que realiza la busqueda
function jsBuscar(){

		//obtenemos el valor insertado a buscar
		buscar=$("#busqueda").prop("value")

		//utilizamos esta variable solo de ayuda y mostrar que se encontro
		encontradoResultado=false;

		//realizamos el recorrido solo por las celdas que contienen el código, que es la primera
		$("#miTabla tr").find('td:eq(0)').each(function () {

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

			   //comparamos para ver si el código es igual a la busqueda
			   if(codigo==buscar){

					//aqui ya que tenemos el td que contiene el codigo utilizaremos parent para obtener el tr.
					trDelResultado=$(this).parent();

					//ya que tenemos el tr seleccionado ahora podemos navegar a las otras celdas con find
					nombre=trDelResultado.find("td:eq(1)").html();
					edad=trDelResultado.find("td:eq(2)").html();

					//mostramos el resultado en el div
					$("#mostrarResultado").html("El nombre es: "+nombre+", la edad es: "+edad)

					encontradoResultado=true;

			   }

		})

		//si no se encontro resultado mostramos que no existe.
		if(!encontradoResultado)
		$("#mostrarResultado").html("No existe el código: "+buscar)
}

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.