How to add elements from a table based on a parameter

Question

My table:

<table class="tabela_finan table table-bordered mb-0">
                    <thead class="thead-dark">
                        <tr>
                            <th>#</th>
            <th>O.S.</th>
            <th>Data</th>
            <th>Descrição</th>
            <th>Técnico</th>
            <th>Valor</th>
            <th>Pagamento</th>
                        </tr>

                    </thead>
                    <tbody>
            <tr>
            <th scope="row">1</th>
            <td>800</td>
            <td>18/01/2020</td>
            <td>Reparo placa pci.</td>
            <td class="tech">Henrique</td>
            <td class="valor">R$ 120</td>
            <td>À vista</td>
            </tr>
            <tr>
            <th scope="row">2</th>
            <td>800</td>
            <td>18/01/2020</td>
            <td>Reparo placa pci.</td>
            <td class="tech">Junior</td>
            <td class="valor">R$ 420</td>
            <td>À vista</td>
            </tr>

                </tbody>
         </table>

I can already add up the total value using this script:

 var totalfinal = $('.valor').get().reduce(function(tot, el) {
  var numerofinal = el.innerHTML.split('.').join('').split(',').join('.');
  return tot + Number(numerofinal);
  }, 0);
  $('#resulth_total').html(" R$ "+totalfinal.toLocaleString(undefined, {minimumFractionDigits: 2}));

There’s a td with the class="tech" that carries the value Henrique or junior. How do I make this sum separately, both Júnior and Henrique?

Answer 1

You can try the following solution instead of using the reduce in the class, you can loop each row of the table and use the class tech as key to calculate each line and place within an array.

var arrTotal = {};

$('.tabela_finan > tbody  > tr').each(function(index, tr) { 

   key = $(tr).children('.tech').text();
   value = Number($(tr).children('.valor').text().replace(/[^0-9]/g, ''));
   
   if (!arrTotal[key]) arrTotal[key] = 0

   arrTotal[key] = arrTotal[key] + value;
   
});

console.log(arrTotal)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tabela_finan table table-bordered mb-0">
                    <thead class="thead-dark">
                        <tr>
                            <th>#</th>
            <th>O.S.</th>
            <th>Data</th>
            <th>Descrição</th>
            <th>Técnico</th>
            <th>Valor</th>
            <th>Pagamento</th>
                        </tr>

                    </thead>
                    <tbody>
            <tr>
            <th scope="row">1</th>
            <td>800</td>
            <td>18/01/2020</td>
            <td>Reparo placa pci.</td>
            <td class="tech">Henrique</td>
            <td class="valor">R$ 120</td>
            <td>À vista</td>
            </tr>
            <tr>
            <th scope="row">2</th>
            <td>800</td>
            <td>18/01/2020</td>
            <td>Reparo placa pci.</td>
            <td class="tech">Junior</td>
            <td class="valor">R$ 420</td>
            <td>À vista</td>
            </tr>
            
            <th scope="row">3</th>
            <td>800</td>
            <td>18/01/2020</td>
            <td>Reparo placa pci.</td>
            <td class="tech">Junior</td>
            <td class="valor">R$ 50</td>
            <td>À vista</td>
            </tr>

     </tbody>
</table>