Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Filtrar por Input text

Estas en el tema de Filtrar por Input text en el foro de Javascript en Foros del Web. Hola ante todo un saludo es mi primer tema expuesto. Trato de filtrar el contenido de una tabla por medio de un input text (Cantidad) ...
  #1 (permalink)  
Antiguo 28/06/2015, 23:54
 
Fecha de Ingreso: junio-2015
Ubicación: Venezuela
Mensajes: 6
Antigüedad: 4 años, 4 meses
Puntos: 0
Filtrar por Input text

Hola ante todo un saludo es mi primer tema expuesto.

Trato de filtrar el contenido de una tabla por medio de un input text (Cantidad)

La ideas es que al pinchar sobre un boton me muestre en el display solo las filas donde el campo input text (Cantidad) tenga un valor

Lo he logrado a medias, o sea, si a la tabla HTML le quito el titulo, filtra perfectamente!
Código HTML:
 <tr>
				<th>Name</th>
				<th>Email</th>
				<th>Phone</th>
				<th>Price</th>
		</tr> 
caso contrario no lo hace, lo hace pero a medias. Pues no se como indicar en el SCRIPT que no tome el valor del titulo al realizar el borrado del display

Codigo Completo
Código HTML:
<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Jefferson Jimenez</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
      <link rel='stylesheet prefetch' href='http://s.cdpn.io/3/bootstrap.min.css'>
    
  </head>

  <body>

    <section class="container">

	<h2>Tabla Filtrar</h2>

	<input type="button" onClick="filtraCantidad();" value="filtra">

	<table id="datos" name="datos" class="order-table table">
		<thead>
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Phone</th>
				<th>Price</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>John Doe</td>
				<td>[email protected]</td>
				<td>0123456789</td>
				<td>99</td>
				<td><input type"text" name="Cantidad" id="Cant1" value=""></td>
			</tr>
			<tr>
				<td>Jane Vanda</td>
				<td>[email protected]</td>
				<td>9876543210</td>
				<td>349</td>
				<td><input type"text" name="Cantidad" id="Cant2" value=""></td>
			</tr>
			<tr>
				<td>Alferd Penyworth</td>
				<td>[email protected]</td>
				<td>6754328901</td>
				<td>199</td>
				<td><input type"text" name="Cantidad" id="Cant3" value=""></td>
			</tr>
			<tr>
				<td>Jefferson</td>
				<td>[email protected]</td>
				<td>041456545454</td>
				<td>125</td>
				<td><input type"text" name="Cantidad" id="Cant4" value=""></td>
			</tr>
			
		</tbody>
	</table>

</section>

	<script language="javascript">
		function filtraCantidad()
		{       // la var para recorrer la tabla
			var tableReg = document.getElementById('datos');
			// la var para pasar el input donde deseo hacer match
                        var x = document.getElementsByName("Cantidad");
                        var i;
				
				{ // Recorremos todas las celdas
				for  (i = 0; i < x.length; i++)
				  // Comparo sea tipo input text   
				        if (x[i].type == "text") { 
				         // Verifico el valor del input
 				          if (x[i].value == null || x[i].value.length == 0 || /^\s*$/.test(x[i].value))
 				           { // Si esta vacio oculto el display	
				             tableReg.rows[i].style.display = 'none';  } else
				              { // caso contrario lo hago visible
				               tableReg.rows[i].style.display = '';  }
   			                       }
   			                  }
    	  	   }
</script>

     
  </body>
</html> 
  #2 (permalink)  
Antiguo 29/06/2015, 01:43
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.594
Antigüedad: 17 años, 7 meses
Puntos: 1277
Respuesta: Filtrar por Input text

Hola:

Parece que solo deberías recorrer el tbody, así que puedes ponerle un id (el que tiene el tag table tal vez ¿?), o con el DOM (getElementsByTagName("tbody")[0])...

El haber usado thead y tbody (bien hecho), te propicia la discriminación.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 01/07/2015, 19:57
 
Fecha de Ingreso: junio-2015
Ubicación: Venezuela
Mensajes: 6
Antigüedad: 4 años, 4 meses
Puntos: 0
De acuerdo Respuesta: Filtrar por Input text

Solucionado Gracias a la ayuda de XVE aca el resultado

Código HTML:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Jefferson Jimenez</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel='stylesheet prefetch' href='http://s.cdpn.io/3/bootstrap.min.css'>
</head>
 
<body>
<section class="container">
 
	<h2>Tabla Filtrar</h2>
 
	<input type="button" onClick="filtraCantidad();" value="filtra">
 
	<table name="datos" class="order-table table">
		<thead>
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Phone</th>
				<th>Price</th>
		       </tr>
		</thead>
		<tbody id="datos">
			<tr>
				<td>John Doe</td>
				<td>[email protected]</td>
				<td>0123456789</td>
				<td>99</td>
				<td><input type="text" name="Cantidad" id="Cant1" value=""></td>
			</tr>
			<tr>
				<td>Jane Vanda</td>
				<td>[email protected]</td>
				<td>9876543210</td>
				<td>349</td>
				<td><input type="text" name="Cantidad" id="Cant2" value=""></td>
			</tr>
			<tr>
				<td>Alferd Penyworth</td>
				<td>[email protected]</td>
				<td>6754328901</td>
				<td>199</td>
				<td><input type="text" name="Cantidad" id="Cant3" value=""></td>
			</tr>
			<tr>
				<td>Jefferson</td>
				<td>[email protected]</td>
				<td>041456545454</td>
				<td>125</td>
				<td><input type="text" name="Cantidad" id="Cant4" value=""></td>
			</tr>
 
		</tbody>
	</table>
 
</section>
 
<script>
function filtraCantidad()
{
	// la var para recorrer la tabla
	var tableReg = document.getElementById('datos');
	// la var para pasar el input donde deseo hacer match
	var x = document.getElementsByName("Cantidad");
 
	for(var i = 0; i < x.length; i++)
	{ // Recorremos todas las celdas
		// Comparo sea tipo input text
		if (x[i].type == "text")
		{
			console.log(x[i].value);
			// Verifico el valor del input
			if (x[i].value == null || x[i].value.length == 0 || x[i].value=="" || /^\s*$/.test(x[i].value))
			{ // Si esta vacio oculto el display
				console.log(i);
				tableReg.rows[i].style.display = 'none';
			} else { // caso contrario lo hago visible
				tableReg.rows[i].style.display = '';
			}
		}
	}
}
</script>
 
</body>
</html> 

Etiquetas: filtrar, scripts
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:20.