CODEWITHSUNDEEP
phpjquery
Gustavo Andriuolo
Gustavo Andriuolo

Reputation: 81

Sum colum values to get total in several tables with JQuery

I generate multiples tables, same structure but different values, with a loop in php/mysql. I have a script to sum all values and show result but is working only if values are in the same row. I need to sum only "precio" column.

Here is a HTML. This is the structure of the table:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script type="text/javascript">

  $(document).ready(function () {

    $('tr').each(function () {

        var sum = 0

        $(this).find('.precio').each(function () {
            var precio = $(this).text();
            if (!isNaN(precio) && precio.length !== 0) {
                sum += parseFloat(precio);
            }
        });

        $('.total_prt', this).html(sum);
    });
});
</script>
       <table class="table table-striped">
                <thead>
                    <tr>
                        <th width="70%">Descripción</th>
                        <th width="20%">Precio</th>
                     </tr>
                </thead>
                <tbody>
                    <tr>
                     <td>Display</td>
                     <td class="precio">1300</td>
                     </tr>
                     <tr>
                     <td>Keyboard</td>
                     <td class="precio">300</td>
                     </tr> 
                    <tr>
                      <td><b>Total:</b></td>
                      <td class="total_prt"><b>$</b></td>
                    </tr>
                   </tbody>
            </table>
<br>

 <table class="table table-striped">
                <thead>
                    <tr>
                        <th width="70%">Descripción</th>
                        <th width="20%">Precio</th>
                       </tr>
                </thead>
                <tbody>
                    <tr>
                      <td>HDD</td>
                      <td class="precio">400</td>
                      </tr>
                      <tr>
                      <td>System</td>
                      <td class="precio">425</td>
                      </tr> 
                      <tr>
                      <td>Something</td>
                      <td class="precio">350</td>
                      </tr> 
                      <tr>
                      <td><b>Total:</b></td>
                      <td class="total_prt"><b>$</b></td>
                    </tr>
                    </tbody>
            </table>

Upvotes: 2

Views: 2111

Answers (5)

Parvez Rahaman
Parvez Rahaman

Reputation: 4387

What i have done is loop through the total element and summed all precio element text to output the total.

$('.total_prt').each(function() {
  var sum = 0;
  $(this).parents('table').find('.precio').each(function() {
    var floted = parseFloat($(this).text());
    if (!isNaN(floted)) sum += floted;
  });

  $(this).html(sum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<table class="table table-striped">
  <thead>
    <tr>
      <th width="70%">Descripción</th>
      <th width="20%">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Display</td>
      <td class="precio">1300</td>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td class="precio">300</td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total_prt"><b>$</b></td>
    </tr>
  </tbody>
</table>
<br>

<table class="table table-striped">
  <thead>
    <tr>
      <th width="70%">Descripción</th>
      <th width="20%">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HDD</td>
      <td class="precio">400</td>
    </tr>
    <tr>
      <td>System</td>
      <td class="precio">425</td>
    </tr>
    <tr>
      <td>Something</td>
      <td class="precio">350</td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total_prt"><b>$</b></td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281646

You need to loop through all tables separately and initialize the sum outside the loop for table rows and not inside it.

$(document).ready(function() {

  $('.table').each(function() {
    var sum = 0
    $(this).find('tr').each(function() {



      $(this).find('.precio').each(function() {
        var precio = $(this).text();
        if (!isNaN(precio) && precio.length !== 0) {
          sum += parseFloat(precio);
        }
      });

      $('.total_prt', this).html(sum);
    });
  })

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<table class="table table-striped">
  <thead>
    <tr>
      <th width="70%">Descripción</th>
      <th width="20%">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Display</td>
      <td class="precio">1300</td>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td class="precio">300</td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total_prt"><b>$</b></td>
    </tr>
  </tbody>
</table>
<br>

<table class="table table-striped">
  <thead>
    <tr>
      <th width="70%">Descripción</th>
      <th width="20%">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HDD</td>
      <td class="precio">400</td>
    </tr>
    <tr>
      <td>System</td>
      <td class="precio">425</td>
    </tr>
    <tr>
      <td>Something</td>
      <td class="precio">350</td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total_prt"><b>$</b></td>
    </tr>
  </tbody>
</table>

Upvotes: 2

RonyLoud
RonyLoud

Reputation: 2426

$('body').find('table').each(function() {
  var sum = 0;
  $(this).find('tr').each(function() {
    $(this).find('td').each(function() {
      if ($(this).hasClass('precio')) {
        var precio = $(this).text();
        if ($.isNumeric(precio)) {
          sum += parseFloat(precio);
        }
      }
    });
  });
  $(this).find('td.total_prt').text(sum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
  <thead>
    <tr>
      <th width="70%">Descripción</th>
      <th width="20%">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Display</td>
      <td class="precio">1300</td>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td class="precio">300</td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total_prt"><b>$</b></td>
    </tr>
  </tbody>
</table>
<br>

<table class="table table-striped">
  <thead>
    <tr>
      <th width="70%">Descripción</th>
      <th width="20%">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HDD</td>
      <td class="precio">400</td>
    </tr>
    <tr>
      <td>System</td>
      <td class="precio">425</td>
    </tr>
    <tr>
      <td>Something</td>
      <td class="precio">350</td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total_prt"><b>$</b></td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Ray O&#39;Donnell
Ray O&#39;Donnell

Reputation: 781

You have both var sum = 0; and $('.total_prt', this).html(sum) in the wrong place - you need to move them outside the $('tr').each(...) loop.

Upvotes: -1

sebas07be
sebas07be

Reputation: 78

If you do, something like this it will work.

$(document).ready(function () {
   $('.table').each(function (i, elem) {
     var totalPrice = 0;
     $(elem).find("td.precio").each(function(j, elem2) {
       totalPrice += parseFloat($(elem2).html());
     })
     $(elem).find(".total_prt").html(totalPrice);

   });
});

Upvotes: 0

Related Questions