Al final lo he logrado usando la funcion JQuery del tutorial
1) El codigo HTML
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">
<input type="button" onClick="Quitafiltra();" value="filtro Off">
<input type="button" onClick="grabaTodoTabla('DataTable');" value="Envia PHP">
<input type='button' id="btnImpr" onclick='window.print();' value='Imprimir' />
<table name="datos" id="DataTable" class="order-table table">
<thead>
<tr>
<th>Codigo</th>
<th>Email</th>
<th>Phone</th>
<th>Price</th>
<th>Cantidad</th>
</tr>
</thead>
<tbody id="datos">
<tr>
<td id="Cod">D1092</td>
<td>[email protected]</td>
<td>0123456789</td>
<td>99</td>
<td><input type="text" name="Cantidad" id="Cant1" value=""></td>
</tr>
<tr>
<td id="Cod">D5236</td>
<td>[email protected]</td>
<td>9876543210</td>
<td>349</td>
<td><input type="text" name="Cantidad" id="Cant2" value=""></td>
</tr>
<tr>
<td id="Cod">D635</td>
<td>[email protected]</td>
<td>6754328901</td>
<td>199</td>
<td><input type="text" name="Cantidad" id="Cant3" value=""></td>
</tr>
<tr>
<td id="Cod">D6984</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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// Actualiza de manera masiva todos los archivos cargados en la tercera pestaña.
function grabaTodoTabla(TABLAID){
//tenemos 2 variables, la primera será el Array principal donde estarán nuestros datos y la segunda es el objeto tabla
var DATA = [];
var TABLA = $("#"+TABLAID+" tbody > tr");
//una vez que tenemos la tabla recorremos esta misma recorriendo cada TR y por cada uno de estos se ejecuta el siguiente codigo
TABLA.each(function(){
//por cada fila o TR que encuentra rescatamos 3 datos, el ID de cada fila,
var ID = $(this).find("td[id='Cod']").text(),
DESC = $(this).find("input[id*='Cant']").val(),
//entonces declaramos un array para guardar estos datos, lo declaramos dentro del each para así reemplazarlo y cada vez
item = {};
//si miramos el HTML vamos a ver un par de TR vacios y otros con el titulo de la tabla,
if(ID !== ''){
if( $(this).find("input[id*='Cant']").val() !== '' ) {
item ['Codigo'] = ID;
item ['Cantidad'] = DESC;
//una vez agregados los datos al array "item" declarado anteriormente hacemos un .push() para agregarlos a nuestro array principal "DATA".
DATA.push(item);
} }
});
console.log(DATA);
//eventualmente se lo vamos a enviar por PHP por ajax de una forma bastante simple y además convertiremos el array en json para evitar
INFO = new FormData();
aInfo = JSON.stringify(DATA);
INFO.append('data', aInfo);
$.ajax({
processData: false,
contentType: false,
type: "POST",
url: "envio.php",
data: INFO,
success: function(data) { alert(data);}
});
}
</script>
<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 = '';
}
}
}
}
function Quitafiltra()
{
// 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
tableReg.rows[i].style.display = '';
}
}
</script>
</body>
</html> Ahora en la misma carpeta del directorio donde estemos trabajando creamos el php que lo llamaremos envio.php (cada quien le pone el nombre que desee)
Código PHP:
<?php
$jsonData = $_POST['data'];
$phpArray = json_decode($jsonData, true);
foreach ($phpArray as $key => $value) {
foreach ($value as $Codigo => $Cantidad) {
$dev = $dev . " $Codigo : $Cantidad " ;
}
}
echo $dev;
?>
Y listo eso es todo....
