Skip to main content
editado para melhor entendimento
Fonte Link
Victor
  • 1,6mil
  • 11
  • 26

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

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

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:

Fonte Link
Victor
  • 1,6mil
  • 11
  • 26

Calcular total de cada linha na tabela

Estou tentando utilizar JavaScript para calcular dinamicamente meus preços multiplicados pelas quantidades e resultar no total referente a cada linha, porém da forma que estou fazendo 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>