I have a certain bug here. I have a function that calculate the quantity x unit price to give the total value and with that make the total sub. Like an e-commerce cart.
$('.total').prop('readonly', true);
$('.vlun').mask("000.000.000.000.000.00", {
reverse: true
});
function somarPrecos() {
$('.vltot').prop('readonly', true);
var $tblrows = $("#pecasList tbody tr");
$tblrows.each(function(index) {
var $tblrow = $(this);
$tblrow.find('.qtd, .vlun').on('change', function() {
var qtd = $tblrow.find(".qtd").val();
var unt = $tblrow.find(".vlun").val();
var subTotal = parseInt(qtd, 10) * parseFloat(unt);
if (!isNaN(subTotal)) {
$tblrow.find('.vltot').val(subTotal);
var grandTotal = 0;
$(".vltot").each(function() {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$('.total').val(grandTotal);
}
});
});
};
In this table I can add and remove products. I wanted it when I removed the line from this product it subtracted the total value from the total sub from the table. I made a function for this and it worked half part as it only subtracts only 1 time.
$("#pecasList").on('click', '.remover-peca', function() {
var removesub = $('.total').val();
var removetot = $('.vltot').val();
$(this).each(function() {
$(this).parents("tr").remove();
var grandsubTotal = removesub - removetot
$('.total').val(grandsubTotal);
});
});
Can anyone give me a light? html below:
<div class="row">
<div class="col-md-12">
<label>
Peça:
</label>
<div style="float:right;margin-bottom:10px;">
<button type="button" class="btn btn-warning add-novo"><i class="fa fa-plus"></i> Adicionar peça</button>
</div>
</div>
</div>
<table id="pecasList" class="table table-bordered">
<thead>
<tr>
<th class="col-md-1">Qtd</th>
<th class="col-md-6">Descrição</th>
<th class="col-md-2">Valor Unitário</th>
<th class="col-md-2">Valor Total</th>
<th class="col-md-1">Remover</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td>
<label>Sub-Total:</label>
<input type="text" class="form-control required total">
</td>
<td></td>
</tr>
</tfoot>
</table>
Function to add table rows:
$(".add-novo").click(function(){
var linha = '<tr><td><input type="number" class="col-md-12 form-control required qtd" name="pedidoAssistencia.qtd"></td><td><input type="text" class="col-md-12 form-control required nomeproduto" name="pedidoAssistencia.nmpeca"></td><td><input type="text" class="col-md-12 form-control required vlun" name="pedidoAssistencia.vlunit"></td><td><input type="text" class="col-md-12 required form-control vltot" name="pedidoAssistencia.vltotl"></td><td><button type="button" class="btn btn-warning remover-peca btn-block"><i class="fa fa-trash"></i></button></td></tr>'
$("table tbody").append(linha);
somarPrecos();
});