How to add values of a column in the table?

Asked

Viewed 5,086 times

5

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 add up all the values of <td> column Qnd and show right below. What better way to do this?

javascript jquery

  • Using some server side language to render this data?

  • @Kayobruno for this situation has to be with front even, js.

  • @acklay, do any of the answers answer your question? If not, could leave a comment to the author to give the chance to be suitable, if yes, accept it.

  • 1

    @Lucascosta used Jefferson’s answer! But sus worked too. Basically they are all very similar. + 1

  • Good! Thank you, it is good for our community to have feedback and when there are answers that work and are suitable to be accepted, they are probably prioritized in search indexing =]

4 answers

8


You can define a class for your tds and through JS add up these values and wherever you want, follows 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>
<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 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>

In case you didn’t want to use jQuery you can only use pure javascript, just change the section of javascript above for this one below

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

  document.getElementById("qtdtotal").innerHTML = valorcalculado;

4

You can go through all the last cells of each row of the table body, 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>
<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>

2

I made a functional example where I put the Qtd class in the tds and took them all in each. I 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>
    <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 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>

  • I just made the same code, kkkkkkkk! ! ;)

  • kkk sorry, I thought you had copied.

  • We both want to help

2

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

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>
<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>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.