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>