0

Estou tentando utilizar JavaScript para calcular dinamicamente meus preços multiplicados pelas quantidades e resultar no total referente a cada linha, porém ele calcula o total geral e joga no último campo da coluna Total. Como na foto abaixo:

inserir a descrição da imagem aqui

    function calc(){ 

        var prices = new Array(); 
        var quantities = new Array(); 
        var counter = 0; 
        var total = 0; 
        var elements = document.getElementsByTagName('input'); 

        for(var i = 0; i < elements.length; i++){ 

        if(elements[i].getAttribute('special') == 'price'){ 
            prices[counter] = parseFloat(elements[i].value); 
        } 

        if(elements[i].getAttribute('special') == 'quantity'){ 
            quantities[counter] = parseInt(elements[i].value); 
            counter++; 
        } 

        }//Fim for 

        for(var i = 0; i < prices.length; i++){ 

            total += (prices[i] * quantities[i]); 

        }//Fim for 

        document.getElementById('total').value = total;

    }//Fim function
        <table border = '2'>
            <thead>
                <tr>
                    <th>Preço</th>
                    <th>Quantidade</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" name="valor_unitario[]" id="valor_unitario" value="2.50" special="price" /></td>
                    <td><input type="text" name="qnt[]" id="qnt" value="1" special="quantity" /></td>
                    <td> <input type="text" name="total" class="total" readonly="readonly" onclick="calc();" /> </td>
                    
                </tr>
                <tr>
                    <td><input type="text" name="valor_unitario[]" id="valor_unitario" value="5.50" special="price" /></td>
                    <td><input type="text" name="qnt[]" id="qnt" value="1" special="quantity" /></td>
                    <td> <input type="text" name="total" class="total" readonly="readonly" onclick="calc();" /> </td>
                </tr>
                <tr>
                    <td><input type="text" name="valor_unitario[]" id="valor_unitario" value="1.20" special="price" /></td>
                    <td><input type="text" name="qnt[]" id="qnt" value="1" special="quantity" /></td>
                    <td> <input type="text" name="total" class="total" readonly="readonly" onclick="calc();" /> </td>
                </tr>
                <tr>
                    <td><input type="text" name="valor_unitario[]" id="valor_unitario" value="9.80" special="price" /></td> 
                    <td><input type="text" name="qnt[]" id="qnt" value="1" special="quantity" /></td>
                    <td> <input type="text" name="total" id="total" readonly="readonly" onclick="calc();" /> </td>
                </tr>                      
            </tbody>
            
        </table>

1
  • 1
    Eu vi, tranquilo!
    – user60252
    Commented 28/04/2018 às 0:46

2 Respostas 2

1

Não utilize ids iguais

É so mudar os valores dos inputs que calcula automaticamente.

var prices = document.querySelectorAll("[id^=valor_unitario]"),
    ammounts = document.querySelectorAll("[id^=qnt]"),
    subTotals = document.querySelectorAll("[id^=total]"),
    printSum = document.getElementById("PrintSoma");

function sumIt() {
    var total = 0;

    Array.prototype.forEach.call(prices, function (price, index) {
        var subTotal = (parseFloat(price.value) || 0) * (parseFloat(ammounts[index].value) || 0);
        
        subTotals[index].value = subTotal.toFixed(2);
        total += subTotal;

    });

    printSum.textContent = total.toFixed(2);
}

Array.prototype.forEach.call(prices, function (input) {
    input.addEventListener("keyup", sumIt, false);
});

Array.prototype.forEach.call(ammounts, function (input) {
    input.addEventListener("keyup", sumIt, false);
});

sumIt();
        <table border='2'>
            <thead>
                <tr>
                    <th>Preço</th>
                    <th>Quantidade</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" name="valor_unitario1" id="valor_unitario1" value="2.50" special="price" /></td>
                    <td><input type="text" name="qnt1" id="qnt1" value="1" special="quantity" /></td>
                    <td> <input type="text" name="total1" id="total1" class="total" readonly="readonly" /> </td>
                    
                </tr>
                <tr>
                    <td><input type="text" name="valor_unitario2" id="valor_unitario2" value="5.50" special="price" /></td>
                    <td><input type="text" name="qnt2" id="qnt2" value="1" special="quantity" /></td>
                    <td> <input type="text" name="total2" id="total2" class="total1" readonly="readonly" /> </td>
                </tr>
                <tr>
                    <td><input type="text" name="valor_unitario3" id="valor_unitario3" value="1.20" special="price" /></td>
                    <td><input type="text" name="qnt3" id="qnt3" value="1" special="quantity" /></td>
                    <td> <input type="text" name="total3" id="total3" class="total1" readonly="readonly" /> </td>
                </tr>                     
            </tbody>
            
        </table>
<table>
    <tr>
        <td><span id="PrintSoma">0.00</span>

        </td>
    </tr>
</table>

Qualquer elemento HTML pode ter um atributo id. O valor desse atributo deve ser único dentro do documento - dois elementos no mesmo documento não podem ter a mesma identificação. Você pode selecionar um elemento com base nessa identificação exclusiva com o método getElementById() do objeto document.

Com Jquery

var prices = $("input[id^=valor_unitario]"),
    amounts = $("input[id^=qnt]"),
    subTotals = $("input[id^=total]"),
    printSum = $("#PrintSoma");

function sumIt() {
    var total = 0;

    prices.each(function(index, price) {
        var subTotal = (parseFloat(price.value) || 0) * (parseFloat(amounts.eq(index).val()) || 0);

        subTotals.eq(index).val(subTotal.toFixed(2));
        total += subTotal;
    });

    printSum.text(total.toFixed(2));
}

prices.on("keyup", sumIt);
amounts.on("keyup", sumIt);

sumIt();

[id^=valor_unitario]") - seleciona elementos que possuem o atributo especificado (id) com um valor que começa exatamente com uma determinada string (valor_unitario). Também poderia ser valor_

Attribute Starts With Selector [name^=”value”]

10
  • estou trazendo um array do banco entao creio que não terei problema quanto aos ids
    – Victor
    Commented 26/04/2018 às 19:01
  • @Victor, entendo, cada página pode ter apenas um elemento com aquele ID, além do mais seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento.
    – user60252
    Commented 26/04/2018 às 19:07
  • Tentei utilizar seu exemplo porém não consegui, ao copiar e colar ele não funciona aqui, que estranho
    – Victor
    Commented 26/04/2018 às 19:19
  • @Victor, no Executar da minha resposta funciona, portanto você deve ter se enganado em alguma coisa.
    – user60252
    Commented 26/04/2018 às 19:22
  • 1
    @Victor altere nessa pergunta mesmo, clicando em editar, e coloque a parte do PHP que contem o while
    – user60252
    Commented 26/04/2018 às 19:37
1

Você pode simplificar fazendo assim...

let preco = []
let qtd = []
let total = []

function calc(indice, self){
  let valorUnitario = document.getElementsByClassName('valor_unitario')[indice]
  let quantidade = document.getElementsByClassName('qnt')[indice]
  let tt = document.getElementsByClassName('total')[indice]
  
  preco.push(valorUnitario.value)
  qtd.push(quantidade.value)
  
  let total_simple = preco[indice] * qtd[indice]
   
  tt.value = total_simple
}
<table border = '2'>
            <thead>
                <tr>
                    <th>Preço</th>
                    <th>Quantidade</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" name="valor_unitario[]" class="valor_unitario" value="2.50" special="price" /></td>
                    <td><input type="text" name="qnt[]" class="qnt" value="1" special="quantity" /></td>
                    <td> <input type="text" name="total" class="total" readonly="readonly" onclick="calc(0, this);" /> </td>
                    
                </tr>
                <tr>
                    <td><input type="text" name="valor_unitario[]" class="valor_unitario" value="5.50" special="price" /></td>
                    <td><input type="text" name="qnt[]" class="qnt" value="1" special="quantity" /></td>
                    <td> <input type="text" name="total" class="total" readonly="readonly" onclick="calc(1, this);" /> </td>
                </tr>
                <tr>
                    <td><input type="text" name="valor_unitario[]" class="valor_unitario" value="1.20" special="price" /></td>
                    <td><input type="text" name="qnt[]" class="qnt" value="1" special="quantity" /></td>
                    <td> <input type="text" name="total" class="total" readonly="readonly" onclick="calc(2, this);" /> </td>
                </tr>
                <tr>
                    <td><input type="text" name="valor_unitario[]" class="valor_unitario" value="9.80" special="price" /></td> 
                    <td><input type="text" name="qnt[]" class="qnt" value="1" special="quantity" /></td>
                    <td> <input type="text" name="total" class="total" readonly="readonly" onclick="calc(3, this);" /> </td>
                </tr>                      
            </tbody>
            
        </table>

3
  • 1
    Vou corrigir alguns detalhes, atualmente está com bug, já atualizo o codigo Commented 26/04/2018 às 18:30
  • teria como mudar o evento para pegar dinamicamente quando saisse com o foco do input de quantidade ? utilizei onkeyup, onblur, onclick, mas nenhum pega dinamicamente sem que o foco passe pelo input de total
    – Victor
    Commented 26/04/2018 às 18:36
  • @Victor vou fazer um exemplo melhor da maneira que você quer Commented 26/04/2018 às 18:37

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 .