How to add values from a column in the table?

Navigation
2

I have the following table below: 

<table class="table table-bordered table-hover" id="customFields">
  <thead>
    <tr>
    </tr>
    <tr>
      <th width="20%">ID</th>
      <th width="75%">Nome </th>
      <th width="5%">Qnd.</th>
    </tr>

  </thead>
  <tbody>
    <tr valign="top">

    </tr>
    <tr valign="top" id="148">
      <td class="text-center">148</td><input type="hidden" id="itemZone" value="148">
      <td>PH_05</td>
      <td>2560</td>
    </tr>
    <tr valign="top" id="149">
      <td class="text-center">149</td><input type="hidden" id="itemZone" value="149">
      <td>PH_04</td>
      <td>2620</td>
    </tr>
    <tr valign="top" id="156">
      <td class="text-center">156</td><input type="hidden" id="itemZone" value="156">
      <td>PH_11</td>
      <td>2476</td>
    </tr>
    <tr valign="top" id="155">
      <td class="text-center">155</td><input type="hidden" id="itemZone" value="155">
      <td>PH_14</td>
      <td>2518</td>
    </tr>
    <tr valign="top" id="158">
      <td class="text-center">158</td><input type="hidden" id="itemZone" value="158">
      <td>PH_13</td>
      <td>2668</td>
    </tr>
    <tr valign="top" id="154">
      <td class="text-center">154</td><input type="hidden" id="itemZone" value="154">
      <td>PH_12</td>
      <td>2628</td>
    </tr>
  </tbody>
</table>

I would like to sum all the values of the <td> of the column Qnd and show it below. What better way to do this?

    
asked by anonymous 23.06.2017 / 20:35

4 answers

4

You can set a class for your tds and through JS add these values and wherever you want, here's an example of how to do with jQuery. 

  $(function(){

    var valorCalculado = 0;

    $( ".valor-calculado" ).each(function() {
      valorCalculado += parseInt($( this ).text());
    });
     $( "#qtdtotal" ).text(valorCalculado);
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table table-bordered table-hover" id="customFields">
      <thead>
        <tr>
        </tr>
        <tr>
          <th width="20%">ID</th>
          <th width="75%">Nome </th>
          <th width="5%">Qnd.</th>
        </tr>

      </thead>
      <tbody>
        <tr valign="top">

        </tr>
        <tr valign="top" id="148">
          <td class="text-center">148</td><input type="hidden" id="itemZone" value="148">
          <td>PH_05</td>
          <td class="valor-calculado">2560</td>
        </tr>
        <tr valign="top" id="149">
          <td class="text-center">149</td><input type="hidden" id="itemZone" value="149">
          <td>PH_04</td>
          <td class="valor-calculado">2620</td>
        </tr>
        <tr valign="top" id="156">
          <td class="text-center">156</td><input type="hidden" id="itemZone" value="156">
          <td>PH_11</td>
          <td class="valor-calculado">2476</td>
        </tr>
        <tr valign="top" id="155">
          <td class="text-center">155</td><input type="hidden" id="itemZone" value="155">
          <td>PH_14</td>
          <td class="valor-calculado">2518</td>
        </tr>
        <tr valign="top" id="158">
          <td class="text-center">158</td><input type="hidden" id="itemZone" value="158">
          <td>PH_13</td>
          <td class="valor-calculado">2668</td>
        </tr>
        <tr valign="top" id="154">
          <td class="text-center">154</td><input type="hidden" id="itemZone" value="154">
          <td>PH_12</td>
          <td class="valor-calculado">2628</td>
        </tr>
      </tbody>
    </table>

    <div id="qtdtotal">
    </div>

If you did not want to use jQuery you can use pure javascript only, just change the javascript excerpt that is above it below 

  var els = document.getElementsByClassName("valor-calculado");
  var valorcalculado = 0;
  [].forEach.call(els, function (el) 
  {
    valorcalculado += parseInt(el.innerHTML);
  });

  document.getElementById("qtdtotal").innerHTML = valorcalculado;
    
23.06.2017 / 20:56
3

You can scroll through all the last cells in each row of the table body, for example: 

var total = 0;
//loop por total as últimas células de cada linha do corpo da tabela
$('table tbody tr td:last-child').each(function(){
  total += parseInt($(this).text());
});
console.log(total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table table-bordered table-hover" id="customFields">
  <thead>
    <tr>
    </tr>
    <tr>
      <th width="20%">ID</th>
      <th width="75%">Nome </th>
      <th width="5%">Qnd.</th>
    </tr>

  </thead>
  <tbody>
    <tr valign="top">

    </tr>
    <tr valign="top" id="148">
      <td class="text-center">148</td><input type="hidden" id="itemZone" value="148">
      <td>PH_05</td>
      <td>2560</td>
    </tr>
    <tr valign="top" id="149">
      <td class="text-center">149</td><input type="hidden" id="itemZone" value="149">
      <td>PH_04</td>
      <td>2620</td>
    </tr>
    <tr valign="top" id="156">
      <td class="text-center">156</td><input type="hidden" id="itemZone" value="156">
      <td>PH_11</td>
      <td>2476</td>
    </tr>
    <tr valign="top" id="155">
      <td class="text-center">155</td><input type="hidden" id="itemZone" value="155">
      <td>PH_14</td>
      <td>2518</td>
    </tr>
    <tr valign="top" id="158">
      <td class="text-center">158</td><input type="hidden" id="itemZone" value="158">
      <td>PH_13</td>
      <td>2668</td>
    </tr>
    <tr valign="top" id="154">
      <td class="text-center">154</td><input type="hidden" id="itemZone" value="154">
      <td>PH_12</td>
      <td>2628</td>
    </tr>
  </tbody>
</table>
    
23.06.2017 / 21:02
1

I made a functional example where I placed the qtd class in the tds and got all of them in each. Hope it helps 

    $(function(){
      var total = 0;
      $('.qtd').each(function(){
        total += parseInt(jQuery(this).text());
      });
      
      $('.total').html(total);

    });
    .total{
      float:right;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table table-bordered table-hover" id="customFields">
      <thead>
        <tr>
        </tr>
        <tr>
          <th width="20%">ID</th>
          <th width="75%">Nome </th>
          <th width="5%">Qnd.</th>
        </tr>

      </thead>
      <tbody>
        <tr valign="top">

        </tr>
        <tr valign="top" id="148">
          <td class="text-center">148</td><input type="hidden" id="itemZone" value="148">
          <td>PH_05</td>
          <td class="qtd">2560</td>
        </tr>
        <tr valign="top" id="149">
          <td class="text-center">149</td><input type="hidden" id="itemZone" value="149">
          <td>PH_04</td>
          <td class="qtd">2620</td>
        </tr>
        <tr valign="top" id="156">
          <td class="text-center">156</td><input type="hidden" id="itemZone" value="156">
          <td>PH_11</td>
          <td class="qtd">2476</td>
        </tr>
        <tr valign="top" id="155">
          <td class="text-center">155</td><input type="hidden" id="itemZone" value="155">
          <td>PH_14</td>
          <td class="qtd">2518</td>
        </tr>
        <tr valign="top" id="158">
          <td class="text-center">158</td><input type="hidden" id="itemZone" value="158">
          <td>PH_13</td>
          <td class="qtd">2668</td>
        </tr>
        <tr valign="top" id="154">
          <td class="text-center">154</td><input type="hidden" id="itemZone" value="154">
          <td>PH_12</td>
          <td class="qtd">2628</td>
        </tr>
      </tbody>
    </table>
    <div class="total"></div>
    
23.06.2017 / 20:52
1

Another way of doing, taking into account the index of each column item: 

var posicao = 2
  , total = 0;
  
$('table tbody td').each(function(a,b){
   if (a == posicao) {
     total += Number(b.innerHTML)
     posicao += 3;
   }   
});

$('table tbody').append('<tr valign="top"><td colspan="3" align="right"><b>Total:</b> '+ total + '</td></tr>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table table-bordered table-hover" id="customFields">
  <thead>
    <tr>
    </tr>
    <tr>
      <th width="20%">ID</th>
      <th width="75%">Nome </th>
      <th width="5%">Qnd.</th>
    </tr>

  </thead>
  <tbody>
    <tr valign="top">

    </tr>
    <tr valign="top" id="148">
      <td class="text-center">148</td><input type="hidden" id="itemZone" value="148">
      <td>PH_05</td>
      <td>2560</td>
    </tr>
    <tr valign="top" id="149">
      <td class="text-center">149</td><input type="hidden" id="itemZone" value="149">
      <td>PH_04</td>
      <td>2620</td>
    </tr>
    <tr valign="top" id="156">
      <td class="text-center">156</td><input type="hidden" id="itemZone" value="156">
      <td>PH_11</td>
      <td>2476</td>
    </tr>
    <tr valign="top" id="155">
      <td class="text-center">155</td><input type="hidden" id="itemZone" value="155">
      <td>PH_14</td>
      <td>2518</td>
    </tr>
    <tr valign="top" id="158">
      <td class="text-center">158</td><input type="hidden" id="itemZone" value="158">
      <td>PH_13</td>
      <td>2668</td>
    </tr>
    <tr valign="top" id="154">
      <td class="text-center">154</td><input type="hidden" id="itemZone" value="154">
      <td>PH_12</td>
      <td>2628</td>
    </tr>
  </tbody>
</table>
    
23.06.2017 / 21:18
How to implement a recursive MDC calculation algorithm in Python? How do I delete empty lists in my list of lists?