4

estou com dificuldades para deixar a multiplicação de quantidade * preço em uma tabela criada dinamicamente.

Melhor do que explicar, é mostrar. Segue o código no jsfiddle: https://jsfiddle.net/koew1s75/

HTML

<div class="container">
                <div class="row">
                    <h3>Produtos</h3>
                    <table id="details-table" class="table">
                        <tbody>
                            <tr>
                                <th scope="col" class="col-1">Item</th>
                                <th scope="col" class="col-5">Produto</th>
                                <th scope="col" class="col-1">Quantidade</th>
                                <th scope="col" class="col-2">Preço</th> 
                                <th scope="col" class="col-3">Total</th>                                
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- #detail-details -->
                <div class="form-group">
                    <button class="btn btn-primary" type="button" id="btn-add-item">Novo Item</button>
                    <input class="btn btn-success" type="submit" value="Salvar">
                </div>
            </div>

jQuery

(function ($) {

    var counter = 0;

    addRow = function () {

        var table = $('#details-table');
        var input = null;

        var row = $('<tr class="linha">');
        var cols = [];

        counter++;

        // Coluna 1 - Item
        input = $('<input>').addClass('form-control').attr('name', 'item' + counter + '').val(counter).attr('disabled', 'disabled');
        cols.push(
            $('<td>').append(
                $('<div>').addClass('form-group').append(input)
            )
        );

        // Coluna 2 - Produto
        input = $('<input>').addClass('form-control').attr('name', 'produto' + counter + '');
        cols.push(
            $('<td>').append(
                $('<div>').addClass('form-group').append(input)
            )
        );

        // Coluna 3 - Quantidade
        input = $('<input>').addClass('form-control').attr('name', 'quantidade' + counter + '');
        cols.push(
            $('<td>').append(
                $('<div>').addClass('form-group').append(input)
            )
        );

        // Coluna 4 - Preço
        input = $('<input>').addClass('form-control').attr('name', 'preco' + counter + '');
        cols.push(
            $('<td>').append(
                $('<div>').addClass('form-group').append(input)
            )
        );

        // Coluna 5 - Total
        input = $('<input>').addClass('form-control').addClass('total').attr('name', 'total' + counter + '').val(totalPreco).attr('disabled', 'disabled');
        cols.push(
            $('<td>').append(
                $('<div>').addClass('form-group').append(input)
            )
        );

        // Button Remove
        cols.push(
            $('<td>').addClass('actions').append(
                $('<button>').addClass('btn btn-danger btn-remove-item').html('&times;').attr('type', 'button').on('click', removeRow)
            )
        );

        row.append(cols);
        table.append(row);

        return false;
    }

    totalPreco = function () {
        $('input[name="total'+counter+'"]').on('keyup', function(){
            var quantidade = $('input[name="quantidade'+counter+'"]').val();
            var preco = $('input[name="preco'+counter+'"]').val()
            var total = $('input[name="total'+counter+'"]');
            var precoTotal = parseFloat(quantidade) * parseFloat(preco);
            return precoTotal;
        });
    }

    removeRow = function () {

        $(this).closest('.linha').remove();
        return false;
    }

    $('#btn-add-item').click(addRow);
})(jQuery);

Valeu desde já \m/

2 Respostas 2

1

Você pode criar um listener nos campos quantidade de preço que irá enviar o resultado da multiplicação ao campo total à medida em que os valores são digitados:

$("#details-table").on("input","input.form-control",function(){
   var linha = $(this).closest("tr");
   var calcula = parseFloat(linha.find("input[name*=quantidade]").val()) * parseFloat(linha.find("input[name*=preco]").val());
   linha.find("input[name*=total]").val( isNaN(calcula) ? '' : calcula);
});

Veja:

(function ($) {

    var counter = 0;

    addRow = function () {

        var table = $('#details-table');
        var input = null;

        var row = $('<tr class="linha">');
        var cols = [];

        counter++;

        // Coluna 1 - Item
        input = $('<input>').addClass('form-control').attr('name', 'item' + counter + '').val(counter).attr('disabled', 'disabled');
        cols.push(
            $('<td>').append(
                $('<div>').addClass('form-group').append(input)
            )
        );

        // Coluna 2 - Produto
        input = $('<input>').addClass('form-control').attr('name', 'produto' + counter + '');
        cols.push(
            $('<td>').append(
                $('<div>').addClass('form-group').append(input)
            )
        );

        // Coluna 3 - Quantidade
        input = $('<input>').addClass('form-control').attr('name', 'quantidade' + counter + '');
        cols.push(
            $('<td>').append(
                $('<div>').addClass('form-group').append(input)
            )
        );

        // Coluna 4 - Preço
        input = $('<input>').addClass('form-control').attr('name', 'preco' + counter + '');
        cols.push(
            $('<td>').append(
                $('<div>').addClass('form-group').append(input)
            )
        );

        // Coluna 5 - Total
        input = $('<input>').addClass('form-control').addClass('total').attr('name', 'total' + counter + '').val(totalPreco).attr('disabled', 'disabled');
        cols.push(
            $('<td>').append(
                $('<div>').addClass('form-group').append(input)
            )
        );

        // Button Remove
        cols.push(
            $('<td>').addClass('actions').append(
                $('<button>').addClass('btn btn-danger btn-remove-item').html('&times;').attr('type', 'button').on('click', removeRow)
            )
        );

        row.append(cols);
        table.append(row);

        return false;
    }

    totalPreco = function () {
        $('input[name="total'+counter+'"]').on('keyup', function(){
            var quantidade = $('input[name="quantidade'+counter+'"]').val();
            var preco = $('input[name="preco'+counter+'"]').val()
            var total = $('input[name="total'+counter+'"]');
            var precoTotal = parseFloat(quantidade) * parseFloat(preco);
            return precoTotal;
        });
    }

    removeRow = function () {

        $(this).closest('.linha').remove();
        return false;
    }

    $('#btn-add-item').click(addRow);
})(jQuery);

$("#details-table").on("input","input.form-control",function(){
   var linha = $(this).closest("tr");
   var calcula = parseFloat(linha.find("input[name*=quantidade]").val()) * parseFloat(linha.find("input[name*=preco]").val());
   linha.find("input[name*=total]").val( isNaN(calcula) ? '' : calcula);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <h3>Produtos</h3>
        <table id="details-table" class="table">
            <tbody>
                <tr>
                    <th scope="col" class="col-1">Item</th>
                    <th scope="col" class="col-5">Produto</th>
                    <th scope="col" class="col-1">Quantidade</th>
                    <th scope="col" class="col-2">Preço</th> 
                    <th scope="col" class="col-3">Total</th>                                
                </tr>
            </tbody>
        </table>
    </div>
    <!-- #detail-details -->
    <div class="form-group">
        <button class="btn btn-primary" type="button" id="btn-add-item">Novo Item</button>
        <input class="btn btn-success" type="submit" value="Salvar">
    </div>
</div>

Edit

Se quiser o valor no total formatado em centavos:

$("#details-table").on("input","input.form-control",function(){
   
   var linha = $(this).closest("tr");
   
   var i_qtd = parseFloat(linha.find("input[name*=quantidade]").val());
   var i_preco = parseFloat(linha.find("input[name*=preco]").val().replace(',','.'));
   
   var calcula = i_qtd * i_preco;
   linha.find("input[name*=total]").val( isNaN(calcula) ? '' : calcula.toFixed(2).replace('.',','));
});
2
  • Hmm perfeito, era exatamente isso que estava tentando fazer, defini-lo como this. Valeu!
    – Develop_SP
    Commented 18/12/2017 às 22:40
  • @Develop_SP Valeu cara! Dei uma pequena melhorada no código. Abs!
    – Sam
    Commented 18/12/2017 às 22:50
1

O código foi utilizando o que estava com uma mudança na parte do cálculo, depois adicione um plugin para que no input deixe digitar número com virgula (jquery.numeric), e na input quantidade e preco no evento de blur é conferido se foi digitado nas duas caixas e se sim é feito o calculo de multiplicação, exemplo:

(function($) {

  var counter = 0;

  addRow = function() {

    var table = $('#details-table');
    var input = null;

    var row = $('<tr class="linha">');
    var cols = [];

    counter++;

    // Coluna 1 - Item
    input = $('<input>').addClass('form-control').attr('name', 'item' + counter + '').val(counter).attr('disabled', 'disabled');
    cols.push(
      $('<td>').append(
        $('<div>').addClass('form-group').append(input)
      )
    );

    // Coluna 2 - Produto
    input = $('<input>').addClass('form-control').attr('name', 'produto' + counter + '');
    cols.push(
      $('<td>').append(
        $('<div>').addClass('form-group').append(input)
      )
    );

    // Coluna 3 - Quantidade
    input = $('<input>').addClass('form-control').attr('name', 'quantidade' + counter + '').attr('id', 'quantidade' + counter).blur(function() {
      return totalPreco(this);
    }).numeric();
    cols.push(
      $('<td>').append(
        $('<div>').addClass('form-group').append(input)
      )
    );

    // Coluna 4 - Preço
    input = $('<input>').addClass('form-control').attr('name', 'preco' + counter + '').attr('id', 'preco' + counter).blur(function() {
      return totalPreco(this);
    }).numeric();
    cols.push(
      $('<td>').append(
        $('<div>').addClass('form-group').append(input)
      )
    );

    // Coluna 5 - Total
    input = $('<input>').addClass('form-control').addClass('total').attr('name', 'total' + counter + '').attr('id', 'total' + counter + '').attr('disabled', 'disabled');
    cols.push(
      $('<td>').append(
        $('<div>').addClass('form-group').append(input)
      )
    );

    // Button Remove
    cols.push(
      $('<td>').addClass('actions').append(
        $('<button>').addClass('btn btn-danger btn-remove-item').html('&times;').attr('type', 'button').on('click', removeRow)
      )
    );

    row.append(cols);
    table.append(row);

    return false;
  }

  totalPreco = function(obj) {
    var id = obj.id.replace(/[^0-9]/g, '')
    var p = $("#preco" + id).val();
    var q = $("#quantidade" + id).val();
    if (p && q) {
      var c = (parseFloat(p.replace(',','.')) * parseFloat(q.replace(',','.')));
      $("#total" + id).val(isNaN(c) ?'':c.toFixed(2).replace('.',','));
    }

  }

  removeRow = function() {

    $(this).closest('.linha').remove();
    return false;
  }

  $('#btn-add-item').click(addRow);
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.alphanum/1.0.24/jquery.alphanum.js"></script>

<div class="container">
  <div class="row">
    <h3>Produtos</h3>
    <table id="details-table" class="table">
      <tbody>
        <tr>
          <th scope="col" class="col-1">Item</th>
          <th scope="col" class="col-5">Produto</th>
          <th scope="col" class="col-1">Quantidade</th>
          <th scope="col" class="col-2">Preço</th>
          <th scope="col" class="col-3">Total</th>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- #detail-details -->
  <div class="form-group">
    <button class="btn btn-primary" type="button" id="btn-add-item">Novo Item</button>
    <input class="btn btn-success" type="submit" value="Salvar">
  </div>
</div>

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 .