Error when adding column with dynamic table in Jquery, with dblclick?

Question

Error when adding column with dynamic table in Jquery, with dblclick?

Asked 7 years, 6 months ago

Viewed 198 times

0

I have a dynamic table with data extracted from the database, and I make changes to the values and salaries dynamically without problems, but at the end of the table I created a <tr><td cols="4">valor total da coluna</td></tr> which shows the sum of the edited values, but the same only appears when I run all tr using enter or when I exit editing using tab. wanted to understand where I’m going wrong, I have two <span> one with id="valor_total_insert" that carries the total value of the commitment and the other id="valor_total" that shows the total value after the edition of 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>
<script src="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>
<table id="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>

I must be making some simple mistake, but I don’t see him.

You need to trigger the function whenever you exit an edit

– Rafael Augusto

2017/05/19 at 18:54
@Rafaelaugusto yes I am calling the function calculaTotal() but it is only working when it loses focus, but I would like it to remain as an excel table giving enter and going to the next line. if you edit the value in the example code and enter until the end you will see that it will add all td and show in id - value_total, but wanted it to be shown at each enter

– WMomesso

2017/05/19 at 18:59

1 answer

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.

by WMomesso • **2,489** points · Answer 1 · 2017-05-22T19:27:50+00:00

The function call was in the wrong place, it was inside ajax, was set to be called every new enter. and in the function I used a code posted by @Sérgio on link.

$(document).ready(function () {
    somaTds();//chamada da função
    $('#tblEditavel tbody tr').each(function (i) {
        $(this).children('td').each(function (p) {            
            if (($(this).attr('title') === 'Valor') || $(this).attr('title') === 'Vencimento') {
                $(this).dblclick(function () {
                    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});
                        somaTds();
                    }
                    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: "scripts/atualiza_tbl.php",
                                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);
                                    //somaTds();
                                }
                            });

                            var posicao = p + 1;
                            $(this).parent()
                                    .html(conteudoNovo)
                                    .parents('tr')
                                    .next()
                                    .children('td:nth-child(' + posicao + ')')
                                    .trigger('dblclick');
                        } else if (keyCode == 27 || e.type == 'blur')
                            $(this).parent().html(conteudoOriginal);

                    }));
                    $(this).children().select();
                });
            }
            ;
        });
    });

});

function somaTds() {
    var selecionados = [].slice.call(document.querySelectorAll('#tblEditavel .vlr'));

    var total = selecionados.reduce(function (soma, el) {
        var numero = el.innerHTML.slice(3).replace(',', '.');
        return soma + Number(numero);
    }, 0);
    var valor_insert = document.getElementById('valor_total_insert');
    var valor_float  = document.getElementById('valor_total');
    
    if(valor_insert != valor_float){
    document.getElementById('valor_total').innerHTML = 'R$' + total.toLocaleString('pt-br', {
        minimumFractionDigits: 2,
        currency: 'BRL'
    });
    }else{
    document.getElementById('valor_total').innerHTML = 'R$' + total.toLocaleString('pt-br', {
        minimumFractionDigits: 2,
        currency: 'BRL'
    });    
    }
}

<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>
<script src="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>
<table id="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="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="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="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="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>