Error adding column with dynamical table in Jquery, with dblclick?

Question

Error adding column with dynamical table in Jquery, with dblclick?

Navigation

#1 by (0 votes)

0

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>

I must be making some simple mistake, but I do not see it.

javascript html jquery

asked by anonymous 19.05.2017 / 20:16

1 answer

Trigger for table optimization How to save data from another model. To archive information

score 0 · Accepted Answer

The function call was in the wrong place, it was inside ajax , it was set to be called with every new enter . and in the function I used a code posted by @ Sérgio in 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><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="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>