0

Fala galera tudo belezinha com vocês? Estou mexendo no meu sistema (leia-se laboratório).

Já basicamente criei todo o Back-End, mas no front estou apanhando com alguns tratamentos.

Estou criando uma tela de orçamentos, onde o Usuário vai abrindo novas linhas de forma dinâmica para cada produto acrescentado.

Meu código está assim:

function id(valor_campo) {
  return document.getElementById(valor_campo);
}

function getValor(valor_campo) {
  var valor = document.getElementById(valor_campo).value.replace(',', '.');
  return parseFloat(valor);
}

function multiplica() {
  var total = getValor('qtd') * getValor('valoru');
  id('valort').value = total;
}

$(document).ready(function() {
  var max_fields = 100;
  var x = 1;
  $('#add_field').click(function(e) {
    e.preventDefault(); //prevenir novos clicks
    if (x < max_fields) {
      $('#listas').append('\
                    <tbody>\
                        <tr class="remove' + x + '">\
                        <td><input type="text" name="qtd[]" id="qtd[]" placeholder="N°"></td>\
                        <td><input type="text" name="item[]" id="item" placeholder="Descrição do Produto ou Serviço"></td>\
                        <td><input type="text" name="valoru[]" onblur="multiplica()" id="valoru[]" placeholder="Valor"></td>\
                        <td><input type="text" name="valort[]" id="valort[]" maxlength="100" /></td>\
                        </td>\
                        <td><a href="#" class="remove_campo" id="remove' + x + '"><button type="button" class="btn-danger">Remover</button></a></td>\
                    </tbody>\
                ');
      x++;
    }
  });


  $('#listas').on("click", ".remove_campo", function(e) {
    e.preventDefault();
    var tr = $(this).attr('id');

    $('#listas tr.' + tr).remove();
    x--;
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="listas" class="table table-hover">
  <thead>
    <tr>
      <th>Qtd</th>
      <th>Item</th>
      <th>Valor Unitário</th>
      <th>Valor Total</th>
      <th>Ação</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="qtd[]" id="qtd" placeholder="N°"></td>
      <td><input type="text" name="item[]" id="item" placeholder="Descrição do Produto ou Serviço" /></td>
      <td><input type="text" name="valoru[]" id="valoru" onblur="multiplica()" /></td>
      <td><input type="text" name="valort[]" id="valort" /></td>
      <td></td>
    </tr>
  </tbody>
</table>

Acabei montando com base em dicas de outros usuários daqui. Porém eu quero fazer o cálculo do input qtd multiplicando o valor de valoru mostrando total em valort

Porém quando acrescento outra linha, meu código simplesmente não consegue fazer o cálculo (Imagino que por conta do ID se repetir). Qual seria a melhor forma de contornar isso?

Agradeço a todos que puderem me ajudar. Um abraço e um bom café quentinho nesse frio =P

0

1 Resposta 1

1

Sim o problema era os id, você já sabia a solução, era só fazer a mesma coisa que fez para remover a linha, usar o x para criar id únicos

Também arrumei a inserção de novas linhas, que, antes, adicionava um tbody na tabela em vez de um tr no corpo da tabela

Outro detalhe,em vez de decrementar o valor de x ao remover uma linha, aumentei o valor de max_fields, para não ter conflito ao criar e excluir linhas

function id(valor_campo) {
  return document.getElementById(valor_campo);
}

function getValor(valor_campo) {
  var valor = document.getElementById(valor_campo).value.replace(',', '.');
  return parseFloat(valor);
}

function multiplica(x) {
  var total = getValor('qtd'+x) * getValor('valoru'+x);
  id('valort'+x).value = total;
}

$(document).ready(function() {
  var max_fields = 100;
  var x = 1;
  $('#add_field').click(function(e) {
    e.preventDefault(); //prevenir novos clicks
    if (x < max_fields) {
      $('#listas').append('\
                        <tr class="remove' + x + '">\
                        <td><input type="text" name="qtd[]" id="qtd'+x+'" placeholder="N°"></td>\
                        <td><input type="text" name="item[]" id="item" placeholder="Descrição do Produto ou Serviço"></td>\
                        <td><input type="text" name="valoru[]" onblur="multiplica('+x+')" id="valoru'+x+'" placeholder="Valor"></td>\
                        <td><input type="text" name="valort[]" id="valort'+x+'" maxlength="100" /></td>\
                        </td>\
                        <td><a href="#" class="remove_campo" id="remove' + x + '"><button type="button" class="btn-danger">Remover</button></a></td>\
                ');
      x++;
    }
  });


  $('#listas').on("click", ".remove_campo", function(e) {
    e.preventDefault();
    var tr = $(this).attr('id');

    $('#listas tr.' + tr).remove();
    max_fields++;
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id='add_field'>ADD</button>

<table class="table table-hover">
  <thead>
    <tr>
      <th>Qtd</th>
      <th>Item</th>
      <th>Valor Unitário</th>
      <th>Valor Total</th>
      <th>Ação</th>
    </tr>
  </thead>
  <tbody id="listas">
    <tr>
      <td><input type="text" name="qtd[]" id="qtd0" placeholder="N°"></td>
      <td><input type="text" name="item[]" id="item" placeholder="Descrição do Produto ou Serviço" /></td>
      <td><input type="text" name="valoru[]" id="valoru0" onblur="multiplica('0')" /></td>
      <td><input type="text" name="valort0" id="valort0" /></td>
      <td></td>
    </tr>
  </tbody>
</table>

1
  • Ah verdade. Passou completamente despercebido isso. obrigado mesmo pela ajuda.
    – Rafael
    Commented 16/06/2018 às 20:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .