Tengo una tabla con inputs dentro que corresponden a una factura o recibo. Esta un input de cantidad, precio y total. Quisiera poder multiplicar cantidad * precio y resultado colocarlo en el total, hasta ese punto no es complicado, pero resulta que tengo separadores de mil en este formato = "1,000.00", se escriben de derecha a izquierda en el input y no encuentro como hacerlo con los separadores.
Ademas como son varias filas en necesario que lo totales se sumen y se agregue en el total general. Esto lo hago ya pero cuando activo los separadores solo toma en cuenta el numero antes de la coma y lo demas no.
Quiero saber como hacerlo, me serviria tambien que solo se sumen con dos decimales y siempre puedan aparecer en este formato "1000.00" tambien es factible.
$("#precio,#total,#total-suma").on({
"focus": function (event) {
$(event.target).select();
},
"keyup": function (event) {
$(event.target).val(function (index, value ) {
return value.replace(/\D/g, "")
.replace(/([0-9])([0-9]{2})$/, '$1.$2')
.replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ",");
});
}
});
items = document.getElementsByClassName("total-input")
for (var i = 0; i < items.length; i++) {
items[i].addEventListener('change', function() {
n = document.getElementById("total-suma");
n.value = parseFloat("0"+n.value) + parseFloat("0"+this.value) - parseFloat("0"+this.defaultValue);
this.defaultValue = this.value;
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="bordes-tabla-venta">
<tr>
<th class="td-border">
<p class="head-tab-ventas">CANT</p>
</th>
<th class="td-border">
<p class="head-tab-ventas">DESCRIPCION</p>
</th>
<th class="td-border">
<p class="head-tab-ventas">PREC. UNIT.</p>
</th>
<th class="td-border">
<p class="head-tab-ventas">TOTAL</p>
</th>
</tr>
<tr>
<td class="td-border"><input type="number" id="cantidad" class="cantidad-input"></td>
<td class="td-border"><input type="text" class="descripcion-input" autocomplete="off" autocomplete="off"></td>
<td class="td-border"><input type="text" id="precio" class="precio-input" autocomplete="off"></td>
<td class="td-border"><input type="text" id="total" class="total-input" autocomplete="off" ></td>
</tr>
<tr>
<td class="td-border"><input type="number" id="cantidad" class="cantidad-input"></td>
<td class="td-border"><input type="text" class="descripcion-input" autocomplete="off"></td>
<td class="td-border"><input type="text" id="precio" class="precio-input" autocomplete="off"></td>
<td class="td-border"><input type="text" id="total" class="total-input" autocomplete="off" ></td>
</tr>
<tr>
<td class="td-border"><input type="number" id="cantidad" class="cantidad-input"></td>
<td class="td-border"><input type="text" class="descripcion-input" autocomplete="off"></td>
<td class="td-border"><input type="text" id="precio" class="precio-input" autocomplete="off"></td>
<td class="td-border"><input type="text" id="total" class="total-input" autocomplete="off" ></td>
</tr>
<tr>
<td class="td-border"><input type="number" id="cantidad" class="cantidad-input"></td>
<td class="td-border"><input type="text" class="descripcion-input" autocomplete="off"></td>
<td class="td-border"><input type="text" id="precio" class="precio-input" autocomplete="off"></td>
<td class="td-border"><input type="text" id="total" class="total-input" autocomplete="off"></td>
</tr>
<tr>
<td class="td-border"><input type="number" id="cantidad" class="cantidad-input"></td>
<td class="td-border"><input type="text" class="descripcion-input" autocomplete="off"></td>
<td class="td-border"><input type="text" id="precio" class="precio-input" autocomplete="off"></td>
<td class="td-border"><input type="text" id="total" class="total-input" autocomplete="off"></td>
</tr>
<tr>
<td class="td-border"><input type="number" id="cantidad" class="cantidad-input"></td>
<td class="td-border"><input type="text" class="descripcion-input" autocomplete="off"></td>
<td class="td-border"><input type="text" id="precio" class="precio-input" autocomplete="off"></td>
<td class="td-border"><input type="text" id="total" class="total-input" autocomplete="off"></td>
</tr>
<tr>
<td class="td-border"><input type="number" id="cantidad" class="cantidad-input"></td>
<td class="td-border"><input type="text" class="descripcion-input" autocomplete="off"></td>
<td class="td-border"><input type="text" id="precio" class="precio-input" autocomplete="off"></td>
<td class="td-border"><input type="text" id="total" class="total-input" autocomplete="off"></td>
</tr>
<tr>
<td class="td-border"></td>
<td></td>
<td class="td-border total-a-pagar"><strong><p>TOTAL A PAGAR</p></strong></td>
<td class="td-border"><input type="text" id="total-suma" class="total-input" autocomplete="off"></td>
</tr>
</table>