Jquery, sum up table

Question

I am not managing to generate a general total of my table, in each row I have the quantity and price. I need to generate the total value.

The current logic is reading all the rows of the table and accumulating the total of the rows. The problem is on the first line that returns Undefined that Ger one Nan (Not a number), the rest are being loaded correctly.

<table class="table" id="table">
        <thead>
            <tr><th>Código</th>
            <th>Descrição</th>
            <th style="width: 10%;">Quantidade</th>
            <th>Preço</th>
            <th>Valor total</th>
            <th>Ação</th>
            </tr></thead><tbody>

                <tr>
                    <td>1</td>
                    <td>Processador I7</td>
                    <td><input class="form-control quantidade" id="id_form-0-quantidade" min="0" name="form-0-quantidade" oninput="atualizarDinamico1(this)" type="number" value="6"></td>
                    <td><input class="form-control preco" id="id_form-0-preco" name="form-0-preco" oninput="atualizarDinamico1(this)" step="0.01" type="number" value="150.00"></td>
                    <td>900.00</td>
                    <td><span id="form-0-DELETE" class="total"></span></td>
                    <td class="text-center">
                            <button value="on" type="submit" name="form-0-DELETE" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            <input id="id_form-0-id" name="form-0-id" type="hidden" value="1">
                    </td>
                </tr>

                <tr>
                    <td>5</td>
                    <td>Teclado Dell</td>
                    <td><input class="form-control quantidade" id="id_form-1-quantidade" min="0" name="form-1-quantidade" oninput="atualizarDinamico1(this)" type="number" value="1"></td>
                    <td><input class="form-control preco" id="id_form-1-preco" name="form-1-preco" oninput="atualizarDinamico1(this)" step="0.01" type="number" value="105.00"></td>
                    <td>105.00</td>
                    <td><span id="form-1-DELETE" class="total"></span></td>
                    <td class="text-center">
                            <button value="on" type="submit" name="form-1-DELETE" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            <input id="id_form-1-id" name="form-1-id" type="hidden" value="22">
                    </td>
                </tr>

                <tr>
                    <td>4</td>
                    <td>Mouse XPTO</td>
                    <td><input class="form-control quantidade" id="id_form-2-quantidade" min="0" name="form-2-quantidade" oninput="atualizarDinamico1(this)" type="number" value="1"></td>
                    <td><input class="form-control preco" id="id_form-2-preco" name="form-2-preco" oninput="atualizarDinamico1(this)" step="0.01" type="number" value="120.00"></td>
                    <td>120.00</td>
                    <td><span id="form-2-DELETE" class="total"></span></td>
                    <td class="text-center">
                            <button value="on" type="submit" name="form-2-DELETE" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            <input id="id_form-2-id" name="form-2-id" type="hidden" value="23">
                    </td>
                </tr>

            </tbody>

    </table>

Script:

  $("#myBtn1").click(function(){
    var total = 0
    $("#table tr").each(function(){
         var currentRow=$(this);
         var qtd=currentRow.find(".quantidade").val();
         var preco=currentRow.find(".preco").val();

         total = total + (parseFloat(qtd) * parseFloat(preco));

         console.log(qtd);
         console.log(preco);

    });
    console.log(total);
});

Console:

(index):319 undefined
(index):320 undefined
(index):319 6
(index):320 150.00
(index):319 1
(index):320 105.00
(index):319 1
(index):320 120.00
(index):323 NaN

Answer 1

Your problem occurs because of these lines:

$("#table tr").each(function() {

This instruction runs through all rows of the table - including the first row of the header, which has no values for quantity or price.

var qtd=currentRow.find(".quantidade").val();
var preco=currentRow.find(".preco").val();

total = total + (parseFloat(qtd) * parseFloat(preco));

Already in this section you try to get the values of the inputs, no matter if they exist or not.

Here are two corrections for your code:

1) Search only in the table body

$("#table tbody tr").each(function() {

2) Sanitize values undefined so that 0.

Thus, if there is any other reason for there to be no value on a line, this reason will not break its calculation:

var qtd = parseFloat(currentRow.find(".quantidade").val() || 0);
var preco = parseFloat(currentRow.find(".preco").val() || 0);

total += qtd * preco;