The system is made with php, mysql, javascript, jquery and what it does is show a list of products and the user chooses the amount and shows a total.
I want to make a function that when the user modifies the quantity of a row, the row is always displayed in the Table, no matter if they search for other products or change the page of the table
This is the code
<table class="table-striped footable-res footable metro-blue" data-page-size="36" data-filter="#filter" style="color: #666;" data-filter-exact-match="false" id="tb">
<thead>
<th width="5%">°</th>
<th width="40%">Producto</th>
<th width="15%">Precio</th>
<th width="15%">Cantidad</th>
<th width="15%">Total</th>
<tr></tr>
</thead>
<tbody>
<td colspan=5 data-value='Nombre de categoria'><b>Nombre de categoria</b></td><tr></tr>";
<td>Contador 1</td>";
<input type='text' name='seleccion1' value='IDPRODUCTO' style='visibility: hidden !important; height: 0 !important; width: 0 !important; padding: 0 !important;'>";
<td data-value='NOMBREPRODUCTO CATEGORIAID CATEGORIANOMBRE' data-type='text'>"PRODUCTONOMBRE"</td>";
<td><input type='text' class='precio' name='precioIDPRODUCTO' id='precio' value='PR' style='color: black; background: transparent; border: 0; text-align: center;' readonly></td>";
<td><input type='text' class='cantidad' name='cantidadIDPRODUCTO' id='cantidad' placeholder='0' placeholder='0' style='color: black;'></td>";
<td><input type='text' class='total' name='totalIDPRODUCTO' id='total' value='0' value='0' style='color: black;'></td>";
<tr></tr>
}
}
if (CONTADOR==0){
<td colspan='3'>No se han agregado productos aún.</td>";
}
echo "<input type='text' name='cod_bod' value='".$sel_bodega."' style='visibility: hidden !important; height: 0 !important; width: 0 !important; padding: 0 !important;'>";
}
?>
</tbody>
<tfoot>
<style>
.footable > tfoot > tr > th, .footable > tfoot > tr > td{ color: black; }
input[type=text]{ color: black; }
</style>
<td colspan="4" align="right">Subtotal</td>
<td><input type="text" class="subtotal" name="subtotal" id="subtotal" readonly placeholder="0"></td>
<tr></tr>
<td colspan="4" align="right">Descuento %<input type="text" id="discount" name="discount" class="discount" style="color: black; background: transparent; border: 0; text-align: center; width: 20px;" value="0"></td>
<td><input type="text" class="descuento" class="descuento" name="descuento" id="descuento" readonly placeholder="0"></td>
<tr></tr>
<td colspan="4" align="right">Total</td>
<td><input type="number" pattern="[0-9]{2}" min="50000" max="2000000" class="totales" id="totales" name="totales" readonly placeholder="0" ></td>
<tr>
<td colspan="5">
<div class="pagination pagination-centered"></div>
</td>
</tr>
</tfoot>
</table>
<script>
//data-toggle="true"
document.getElementById("tb").addEventListener("input", function(e) {
const parent = e.target.closest("tr");
const precio = parent.querySelector('[class=precio]').value;
const cantidad = parent.querySelector('[class=cantidad]').value;
const total = precio * cantidad;
parent.querySelector('[class=total]').value = total;
document.querySelector('[class=subtotal]').value = subtotal();
document.querySelector('[class=discount]').value = discount();
document.querySelector('[class=descuento]').value = dscto();
document.querySelector('[class=totales]').value = totalfinal();
});
function subtotal(){
var subtotal = 0;
for(var x=0;x<document.querySelectorAll(".total").length;x++){
subtotal += Number(document.querySelectorAll(".total")[x].value);
}
return subtotal;
}
function discount(){
var subtotal = Number(document.getElementById("subtotal").value);
var discount = 0;
if(subtotal > 150000 && subtotal < 299999){
discount = 3;
}
if(subtotal > 300000 && subtotal < 449999){
discount = 4;
}
if(subtotal > 450000){
discount = 5;
}
return discount;
}
function dscto(){
var subtotal = Number(document.getElementById("subtotal").value);
var descuento = 0;
if(subtotal > 150000 && subtotal < 299999){
descuento = subtotal * 0.03;
}
if(subtotal > 300000 && subtotal < 449999){
descuento = subtotal * 0.04;
}
if(subtotal > 450000){
descuento = subtotal * 0.05;
}
return descuento;
}
function totalfinal(){
var subtotal2 = Number(document.getElementById("subtotal").value);
var descuento2 = Number(document.getElementById("descuento").value);
var totales = subtotal2 - descuento2;
return totales;
}