Calculate values for each column of an html table

Question

I want to calculate values from a table. Each column has different values, at the end of the table, I would like to inform the total value. Below is my html.

<table class="table table-striped m-table m-table--head-bg-success">
  <thead>
    <tr>
      <th>Nº doc</th>
      <th>Valor doc</th>
      <th>Correção doc</th>
      <th>Multa doc</th>
      <th>Valor extra doc</th>
      <th>Valor Total</th>
    </tr>
  </thead>
  <tbody>
    <?php 
      $sql = $db->prepare("SELECT * FROM doc where cod_doc = '$id_get' ORDER BY data ASC ");          
      $sql->execute();   $a = 0  ;        
           while($row=$sql->fetch(PDO:: FETCH_ASSOC)){ 
              $a++;
        $pct_multa = 2;
        $pct_ext = 1;
        $pct_cob = 10; 
        $valor_doc = $row['valor_doc'];
        $data = $row['data'];     
    ?>
    <tr>
      <th scope="row">
        <? echo $row['numero_doc']?>
      </th>

      <td id="sum1"> 
        <? echo str_replace('.', ',', $valor_doc)?>
      </td>
      <td id="sum2">
        <? echo str_replace('.', ',', $doc_correcao)?>
      </td>
      <td id="sum3">
        <? echo valorMulta($valor_doc,$pct_multa) ?>
      </td>
      <td id="sum4">
        <? echo valorext($valor_doc,$pct_ext) ?>
      </td>
    
      <td id="sum5"><span class="m-widget6__text m--align-right m--font-boldest m--font-brand">
														<? echo valorTotal($valor_doc,$pct_ext,$pct_multa, $data) ?>
													</span></td>
    </tr>
    <?php } ?>
  </tbody>
</table>

I created an id for each td (id="sum1") total of the column I want to calculate. How can I proceed ? Thanks for your valuable attention.

Answer 1

First of all, the attribute id is something that should be unique, so instead of id use class:

<tr>
    <th scope="row">
    <? echo $row['numero_doc']?>
    </th>
    <td class="sum1">
        <? echo str_replace('.', ',', $valor_doc)?>
    </td>
    <td class="sum2">
        <? echo str_replace('.', ',', $doc_correcao)?>
    </td>
    <td class="sum3">
        <? echo valorMulta($valor_doc,$pct_multa) ?>
    </td>
    <td class="sum4">
        <? echo valorext($valor_doc,$pct_ext) ?>
    </td>    
    <td class="sum5">
        <span class="m-widget6__text m--align-right m--font-boldest m--font-brand">
            <? echo valorTotal($valor_doc,$pct_ext,$pct_multa, $data) ?>
        </span>
    </td>
</tr>

In the Jquery you can repeat the example for each column:

var sum1 = 0;

$.each($('.sum1'),function(){
    var num = parseInt($(this).text().replace(/[^0-9]/g,''));
    sum1 += num;
});

• .replace(/[^0-9]/g,'') keeps only the numbers of text broken by text();

• parseInt() transforms the string in integer;

Then just reform the value to monetary and include where it will be displayed.