How to calculate the total value in a dynamically created table?

Question

I have the following code that creates a table in jquery. The problem is that I wanted to create a subtotal that would add up all the values of the total column. But I’m not getting it because the table is created dynamically. Any suggestions?

Follows the code:

function retorna_pedidos(valor)
{
 let mensagem_pedidos = "Nenhum pedido encontrado";
 let container_mostra_pedidos = $('.mostra_pedidos');
 let quantidade = $('#qtd').val();
 let quantidade_pedidos = "";
 let valorTotal = "";
 let itemHTMLp = "";

 if (valor == null)
 {
   valor = 1;
  }

 $.ajax({
  url: url_base + "pedidos?qtd=" + quantidade + "&page=" + valor,
  type: 'GET',
  dataType: 'json',
  success: function (data)
  {
  var retorno = data.pedidos.data;
  if (retorno == 0)
  {
    $('.classe-pedidos').css('display','none');
    $('.pedido-error-registro').css('display','block');
    $('.pedido-error-registro .mensagem-erro').html(mensagem_pedidos);
  }
  else
  {

    $.each(data, function(key,item) {

      let registros  = item.data.length;
      let current_page = item.current_page;
      let last_page = item.last_page;
      let next_page_url = item.next_page_url;
      let prev_page_url = item.prev_page_url;
      let pedidos = item.data;

      sessionStorage.setItem('pagina',current_page);
      sessionStorage.setItem('last_page',last_page);

      if (next_page_url == null)
      {
        if (current_page == 1)
        {
          $('.action-bar-pedido').html("<a id='btn-pagina-anterior-pedido' title='Pàgina Anterior' class='buttonPrevious btn btn-primary' style='display: none;'><< Página Anterior</a>");
        }
        else
        {
          $('.action-bar-pedido').html("<a id='btn-pagina-anterior-pedido' title='Pàgina Anterior' class='buttonPrevious btn btn-primary' style='display: block;'><< Página Anterior</a>");
        }
      }
      else if (prev_page_url == null)
      {
        $('.action-bar-pedido').html("<a id='btn-proxima-pagina-pedido' title='Próxima Página' display='block' class='buttonNext btn btn-success'>Próxima Página >></a>");
      }
      else if (prev_page_url != null || next_page_url != null)
      {
        $('.action-bar-pedido').html("<a id='btn-proxima-pagina-pedido' title='Próxima Página' display='block' class='buttonNext btn btn-success'>Próxima Página >></a><a id='btn-pagina-anterior-pedido' title='Pàgina Anterior' class='buttonPrevious btn btn-primary' style='display: block;'><< Página Anterior</a>");
      }

      for (var i in pedidos) {
        id_pedido = pedidos[i].pedidos_id;
        nome_cliente = pedidos[i].nome_cliente;
        nome_produto = pedidos[i].nome_produto;
        data_atual = pedidos[i].data;
        data_pedido = data_atual.split("-").reverse().join("/");
        frete_atual = pedidos[i].frete;
        preco_produto = pedidos[i].preco_produto;
        quantidade_pedidos = pedidos.length;
      //  console.log(pedidos);

        valorTotal =  parseFloat(quantidade_pedidos) * parseFloat(preco_produto) + frete_atual;

        itemHTMLp += "<tr>";
        itemHTMLp += "<td><input type='checkbox' value='" +  id_pedido + "' name='verifica_check_box[]' id='verifica_check_box' class='flat'/></td>";
        itemHTMLp += "<td>" + nome_cliente + "</td>";
        itemHTMLp += "<td>" + nome_produto + "</td>";
        itemHTMLp += "<td>" + data_pedido + "</td>";
        itemHTMLp += "<td class='frete-produto'>" + frete_atual + "</td>";
        itemHTMLp += "<td class='preco-produto'>" + preco_produto + "</td>";
        itemHTMLp += "<td class='valor-total'>" + valorTotal + "</td>";
        itemHTMLp += "</tr>";
      }
    });
    container_mostra_pedidos.html(itemHTMLp);
  }

},
error: function (data)
{
  console.log(data);
}
});

Answer 1

It is not the same as yours, as I do not have your data I can not simulate. But follows...

$(function(){
var total = 0;
$('.valor-total').each(function () {
    total += parseInt($(this).text());
});

console.log(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<table>
  <tr>
    <td class='valor-total'>1<td>
    <td class='valor-total'>15<td>
    <td>abc<td>
    <td class='valor-total'>22<td>
    <td >def<td>
  </tr>
</table>

Answer 2

You can calculate all values of td going through each one with .each() and adding the values. Calling the function below you get the total result:

function total(){
   tt_final = 0;
   subs = $('.valor-total');
   
   subs.each(function(){
      tt_final += parseFloat($(this).text());
   });
   
   alert(tt_final);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
   <tr>
      <td class="valor-total">
         10
      </td>
   </tr>
   <tr>
      <td class="valor-total">
         4
      </td>
   </tr>
   <tr>
      <td class="valor-total">
         50
      </td>
   </tr>
</table>
<br /><br />
<input type="button" value="Calcular" onclick="total()" />

Remarks:

1. Optimize your code by concatenating the table code in this way:

itemHTMLp += "<tr>"
+"<td><input type='checkbox' value='1' name='verifica_check_box[]' id='verifica_check_box' class='flat'/></td>"
+"<td>fulano</td>"
+"<td>produto</td>"
+"<td>14/11/2017</td>"
+"<td class='frete-produto'>0</td>"
+"<td class='preco-produto'>5</td>"
+"<td class='valor-total'>31</td>"
+"</tr>";

2. Failed to open and close the table with <table> and </table>:

You can do it like this: container_mostra_pedidos.html('<table>'+itemHTMLp+'</table>');