Multiplying values from a PivotTable

Question

Multiplying values from a PivotTable

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a pivot table with quantity columns of a product and unit value, where I need to multiply the unit value by the quantity (qtd X val_unitario) and at the end to show 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><trid="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 make this calculation? I was trying to select each input via .each() but I could not quite understand the application of it

javascript jquery

asked by anonymous 02.03.2018 / 21:37

2 answers

0

Instead of adding, as you are doing in this line:

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

You should multiply:

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

But you also need to change the initial value from tot to 1 . Because the loop generates only two indexes, 0 and 1 , which are each input of each line, when the index is 1 you throw the value of the multiplication in the <p> of the last column of the row and sum values and plays in <p> of the grand 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><trid="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>

02.03.2018 / 22:18

Change only one checkbox Why is this code not responsive?

score 1 · Accepted Answer

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

In this event it will get the line tr which belongs to the input that triggered the event and from that line tr will get the value each box of input and accumulate in the tot variable.

At the end, it looks for the column td more to the right and put the tot value inside it.

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

Edited: The calculation was wrong. He was adding up the value of the cells when he should multiply each line and then add the right column. I set it to be correct.

$('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><trid="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>