JavaScript - Filtrar por Input text

   
Vista:

Filtrar por Input text

Publicado por Jefferson Jimenez (2 intervenciones) el 29/06/2015 07:05:51
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:

1
2
3
4
5
6
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!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>john.doe@gmail.com</td>
				<td>0123456789</td>
				<td>99</td>
				<td><input type"text" name="Cantidad" id="Cant1" value=""></td>
			</tr>
			<tr>
				<td>Jane Vanda</td>
				<td>jane@vanda.org</td>
				<td>9876543210</td>
				<td>349</td>
				<td><input type"text" name="Cantidad" id="Cant2" value=""></td>
			</tr>
			<tr>
				<td>Alferd Penyworth</td>
				<td>alfred@batman.com</td>
				<td>6754328901</td>
				<td>199</td>
				<td><input type"text" name="Cantidad" id="Cant3" value=""></td>
			</tr>
			<tr>
				<td>Jefferson</td>
				<td>administracion@grupozucol.com</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>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Filtrar por Input text

Publicado por xve (1595 intervenciones) el 29/06/2015 09:02:43
Hola Jefferson, tu problema, es que eliminas las columnas, y el titulo, es una columna... La solución ha sido simplemente cambiar el id de lugar... aquí lo tienes, bien tabulado para que se entienda.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!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>john.doe@gmail.com</td>
				<td>0123456789</td>
				<td>99</td>
				<td><input type="text" name="Cantidad" id="Cant1" value=""></td>
			</tr>
			<tr>
				<td>Jane Vanda</td>
				<td>jane@vanda.org</td>
				<td>9876543210</td>
				<td>349</td>
				<td><input type="text" name="Cantidad" id="Cant2" value=""></td>
			</tr>
			<tr>
				<td>Alferd Penyworth</td>
				<td>alfred@batman.com</td>
				<td>6754328901</td>
				<td>199</td>
				<td><input type="text" name="Cantidad" id="Cant3" value=""></td>
			</tr>
			<tr>
				<td>Jefferson</td>
				<td>administracion@grupozucol.com</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>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Filtrar por Input text

Publicado por Jefferson Jimenez (2 intervenciones) el 29/06/2015 16:20:52
Gracias xve

ha sido un sencillo, pero efectivo acierto.. Muchas Gracias...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar