I have a dynamic table with data extracted from the database, and I make changes to values and maturities dynamically without problems, but at the end of the table I created a <tr><td cols="4">valor total da coluna</td></tr>
that presents the sum of the edited values, but it is only when I run all tr using enter or when I exit editing using tab. I want to understand where I am going wrong, I have two <span>
one with id="valor_total_insert"
that loads the total value of the commit and the other id="valor_total"
that shows the total value after editing the tds
$('#tblEditavel tbody tr').each(function(i) {
$(this).children('td').each(function(p) {
if (($(this).attr('title') === 'Valor') || $(this).attr('title') === 'Vencimento') {
$(this).dblclick(function() { //inicio dblclick
if ($('td > input').length > 0) {
return;
}
var conteudoOriginal = $(this).text();
var novoElemento = $('<input/>', {
type: 'text',
value: conteudoOriginal
});
if ($(this).attr('title') === 'Valor') {
$(novoElemento)
.maskMoney({
prefix: 'R$ ',
allowNegative: true,
thousands: '',
decimal: ',',
affixesStay: true
});
}
if ($(this).attr('title') === 'Vencimento') {
$(novoElemento)
.mask("99/99/9999");
}
$(this).html(novoElemento.bind('blur keydown', function(e) {
var keyCode = e.which;
var conteudoNovo = $(this).val();
if (keyCode == 13 || keyCode == 9 || keyCode == 0 && conteudoNovo != '' && conteudoNovo != conteudoOriginal) {
var objeto = $(this);
$.ajax({
type: "POST",
url: "#",
data: {
id: $(this).parents('tr').children().first().text(),
campo: $(this).parent().attr('title'),
valor: conteudoNovo
},
success: function(result) {
objeto.parent().html(conteudoNovo);
$('body').append(result);
}
});
var posicao = p + 1;
$(this).parent()
.html(conteudoNovo)
.parents('tr')
.next()
.children('td:nth-child(' + posicao + ')')
.trigger('dblclick');
calculaTotal();
} else if (keyCode == 27 || e.type == 'blur')
$(this).parent().html(conteudoOriginal);
}));
$(this).children().select();
} /*fim dblclick*/ )
};
});
});
function calculaTotal() {
var colunas = document.querySelectorAll('#tblEditavel tr .vlr');
var numColunas = colunas.length;
var soma = 0;
var converte = 0;
for (let i = 0; i < numColunas; i++) {
converte = parseFloat(colunas[i].textContent.replace('R$ ', '').replace(',', '.'));
soma = soma + converte;
$('#valor_total').css('color', 'blue').html(soma).val();
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script><tableid="tblEditavel" class="table table-condensed table-striped table-hover">
<caption>Lançamento </caption>
<thead>
<tr>
<th>#</th>
<th>Nome</th>
<th>Número</th>
<th>Parcela</th>
<th>Vencimento</th>
<th>Valor</th>
</tr>
</thead>
<tbody>
<tr>
<td>88</td>
<td>Banco do Brasil</td>
<td>99</td>
<td>1 <b>de</b> 4<b style="color: red;"> </b></td>
<td title="Vencimento" class="editavel dt">21/10/2017</td>
<td id="a1" title="Valor" class="editavel vlr">R$ 375,37</td>
</tr>
<tr>
<td>89</td>
<td>Banco do Brasil</td>
<td>99</td>
<td>2 <b>de</b> 4<b style="color: red;"> </b></td>
<td title="Vencimento" class="editavel dt">20/11/2017</td>
<td id="a2" title="Valor" class="editavel vlr">R$ 375,35</td>
</tr>
<tr>
<td>90</td>
<td>Banco do Brasil</td>
<td>99</td>
<td>3 <b>de</b> 4<b style="color: red;"> </b></td>
<td title="Vencimento" class="editavel dt">20/12/2017</td>
<td id="a3" title="Valor" class="editavel vlr">R$ 375,35</td>
</tr>
<tr>
<td>91</td>
<td>Banco do Brasil</td>
<td>99</td>
<td>4 <b>de</b> 4<b style="color: red;"> </b></td>
<td title="Vencimento" class="editavel dt">19/01/2018</td>
<td id="a4" title="Valor" class="editavel vlr">R$ 375,35</td>
</tr>
<tr>
<td colspan="4"><b>Total</b></td>
<td style="text-align: right"><b><span id="valor_total" style="color: blue;"></span></b></td>
<td><b><span id="valor_total_insert">R$1.501,42</span></b></td>
</tr>
</tbody>
</table>