I'm having a hard time implementing dynamic results in my application ....
1 - When deleting a row, sort the rows correctly
2 - Calculate the shopping basket TOTAL total
3 - Re-calculate the OVERALL TOTAL by deleting a line
4 - Clear ALL FIELDS and ZERO TOTAL OVERALL
So far I've only been able to add lines to the fields and delete them.
$(document).ready(function () {
var contador = 0 ;
//adiciona nova linha
$("#addLinha").on("click", function () {
contador++;
var newRow = $("<tr>");
var cols = "";
cols += '<td>' + contador + '</td>';
cols += '<td><input class="produto" type="text" name="produto' + contador + '"/></td>';
cols += '<td><input class="qtd" type="text" name="qtd' + contador + '"/></td>';
cols += '<td><label text-align="center"><input align="center" class="preco" type="text" name="preco' + contador + '"/></label></td>';
cols += '<td class="col-md-2 total">R$ 0,00</td>';
cols += '<td><a class="deleteLinha"> Excluir </a></td>';
newRow.append(cols);
$("#products-table").append(newRow);
});
//chamada da função para calcular o total de cada linha
$("#products-table").on("blur keyup", 'input[name^="preco"], input[name^="qtd"]', function (event) {
calculateRow($(this).closest("tr"));
});
//remove linha
$("#products-table").on("click", "a.deleteLinha", function (event) {
$(this).closest("tr").remove();
});
// ******************************************************************************************************** //
// Atalho para adicionar linha por tecla
$(document).keypress(function(e){
if(e.wich == 13 || e.keyCode == 13){
//alert('A tecla ENTER foi pressionada');
contador++;
var newRow = $("<tr>");
var cols = "";
cols += '<td>' + contador + '</td>';
cols += '<td><input class="produto" type="text" name="produto' + contador + '"/></td>';
cols += '<td><input class="qtd" type="text" name="qtd' + contador + '"/></td>';
cols += '<td><label text-align="center"><input align="center" class="preco" type="text" name="preco' + contador + '"/></label></td>';
cols += '<td class="col-md-2 total">R$ 0,00</td>';
cols += '<td><a class="deleteLinha"> Excluir </a></td>';
newRow.append(cols);
$("#products-table").append(newRow);
}
});
}); // FIM JQUERY
//função para calcular o total de cada linha
function calculateRow(row) {
var preco = +row.find('input[name^="preco"]').val();
var qtd = +row.find('input[name^="qtd"]').val();
//2 casas decimais
var total = (preco * qtd).toFixed(2);
//substitui ponto por virgula
total = total.replace(".", ",");
//a regex abaixo coloca um ponto a esquerda de cada grupo de 3 digitos desde que não seja no inicio do numero
row.find('.total').html("R$ " + (total).replace(/\B(?=(\d{3})+(?!\d))/g, "."));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><tableid="products-table" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="cabecalho">Nº</th>
<th class="cabecalho">Produto</th>
<th class="cabecalho">Quantidade</th>
<th class="cabecalho">Valor Unitário</th>
<th class="cabecalho">Valor Total</th>
<th class="cabecalho"></th>
</tr>
</thead>
<tbody class="row"> </tbody>
<tfoot>
<tr>
<td colspan="4" style="text-align: left;">
<button class="btn btn-info waves-effect w-md waves-light m-b-5" id="addLinha" type="button">Adicionar Produto</button>
</td>
<td>
<label><b>TOTAL GERAL</b></label>
</td>
<td>
</td>
</tr>
</tfoot>
</table>