Multiply values from a dynamic table

Question

I have a dynamic table with columns of quantity of a product and unit value, where I need to multiply the unit value by quantity (Qtd X val_unitario) and at the end display the total sum of the multiplications (according to the image)

    $('table input').on('input', function () {
                        var $tr = $(this).closest('tr');
                        var tot = 0;
                        $('input', $tr).each(function () {
                            tot += parseFloat(($(this).val()).replace(',', '.'));
                        });
                        $('td:last', $tr).text(tot);
                    }).trigger('input');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
       <tr id="tr_1">
          <td id="td_qtd_produto_1">
             <input type="text" id="qtd_produto_1" name="qtd_produto_1" value="5">
          </td>
          <td id="val_unitario_produto_1">
             <input type="text" id="valor_unitario_1" name="valor_unitario_1" value="48,00">
          </td>
          <td id="td_total_1">
          <p id="total_1"></p>
          </td>
       </tr>
       <tr id="tr_2">
          <td id="td_qtd_produto_2">
             <input type="text" id="qtd_produto_2" name="qtd_produto_2" value="12">
          </td>
          <td id="val_unitario_produto_2">
             <input type="text" id="valor_unitario_2" name="valor_unitario_2" value="6,80">
          </td>
          <td id="td_total_2">
          <p id="total_2"></p>
          </td>
       </tr>
      
       <tr id="td_total">
          <td></td>
          <td></td>
          <td>
            <p id="total_geral"></p>
          </td>
       </tr>
    </table>

How do I perform this calculation? I was trying to select each input via .each() but I couldn’t quite understand his application

Answer 1

In the first part of the code what he’s doing is putting an event in each box of input within the table for when the user enters some value.

At this event he picks up the line tr to which the input that fired the event and from that line tr will take the value each box input and accumulate in the variable tot.

At the end, he looks for the column td rightmost and put the tot value inside it.

I added a code to fetch the value of all input boxes and not only the boxes that are on the current line and then display the total in the field that has the general total id.

Edited: The calculation was wrong. I was adding up the value of the cells when I should multiply each row and then add up the right column. Adjusted to be right.

$('table input').on('input', function () {
   var $linha = $(this).closest('tr');
   var tot = 0
   var anterior = 1
   $linha.find('input').each(function () {
       tot = parseFloat(($(this).val()).replace(',', '.'));
       tot = (isNaN(tot) ? 0 : tot) * anterior;
       anterior = tot;
    });
    $linha.find('td:last').text(tot);
    var tg = 0;
    $linha.closest('table').find('td:last-child').each(function () {
       if ($(this).attr("id")) {
           // td sem id é a coluna do total geral, mas seria melhor ter uma identificação ou classe.
           var valor = parseFloat($(this).text().replace(',', '.'));
           tg += (isNaN(valor) ? 0 : valor);
       }
    });
    $("#total_geral").text(tg);
}).trigger("input");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
           <tr id="tr_1">
              <td id="td_qtd_produto_1">
                 <input type="text" id="qtd_produto_1" name="qtd_produto_1" value="5">
              </td>
              <td id="val_unitario_produto_1">
                 <input type="text" id="valor_unitario_1" name="valor_unitario_1" value="48,00">
              </td>
              <td id="td_total_1">
              
              </td>
           </tr>
           <tr id="tr_2">
              <td id="td_qtd_produto_2">
                 <input type="text" id="qtd_produto_2" name="qtd_produto_2" value="12">
              </td>
              <td id="val_unitario_produto_2">
                 <input type="text" id="valor_unitario_2" name="valor_unitario_2" value="6,80">
              </td>
              <td id="td_total_2">
              
              </td>
           </tr>
          
           <tr id="td_total">
              <td></td>
              <td></td>
              <td>
                <p id="total_geral"></p>
              </td>
           </tr>
        </table>

Answer 2

Instead of adding up, like you’re doing on this line:

tot += parseFloat(($(this).val()).replace(',', '.'));

Should multiply:

tot = tot * parseFloat(($(this).val()).replace(',', '.'));

But you also need to change the initial value of tot for 1. How the loop generates only two indices, 0 and 1, that are each input of each row, when the index is 1 you play the multiplication value on <p> of the last column of the row and sum the values and play in the <p> of the total of the last line.

See the code:

$('table input').on('input', function () {
   var $tr = $(this).closest('tr'),
       tot = 1;
   $tr.find("input").each(function (i) {
      tot = tot * parseFloat(($(this).val()).replace(',', '.'));
      if(i == 1){
         $tr.find('td:last p').text(tot);
         
         var tg = 0;
         $tr.closest('table').find('tr p').not(":last").each(function(){
            tg += parseFloat(($(this).text()).replace(',', '.'));
         });
         
         $('#total_geral').text(tg);
      }
   });
   
}).trigger('input');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr id="tr_1">
       <td id="td_qtd_produto_1">
          <input type="text" id="qtd_produto_1" name="qtd_produto_1" value="5">
       </td>
       <td id="val_unitario_produto_1">
          <input type="text" id="valor_unitario_1" name="valor_unitario_1" value="48,00">
       </td>
       <td id="td_total_1">
       <p id="total_1"></p>
       </td>
    </tr>
    <tr id="tr_2">
       <td id="td_qtd_produto_2">
          <input type="text" id="qtd_produto_2" name="qtd_produto_2" value="12">
       </td>
       <td id="val_unitario_produto_2">
          <input type="text" id="valor_unitario_2" name="valor_unitario_2" value="6,80">
       </td>
       <td id="td_total_2">
       <p id="total_2"></p>
       </td>
    </tr>
   
    <tr id="td_total">
       <td></td>
       <td></td>
       <td>
         <p id="total_geral"></p>
       </td>
    </tr>
 </table>