[SOLUCIONADO] Filtrar por Input text

jjjtaccess · #1 (**permalink**) 28/06/2015, 22:54

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>

caricatos · #2 (**permalink**) 29/06/2015, 00:43

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

jjjtaccess · #3 (**permalink**) 01/07/2015, 18:57

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>