0

There is a table:

   <table style="width:920px;" id="tblPotrawySkladniki">
   <thead>
      <tr>
         <td class="cell0 style1"><p style="font-style:italic;">Nazwa produktu</p></td>
         <td class="cell1 style1"><p style="font-style:italic;">Waga [g]</p></td>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>banana</td>
          <td>10</td>
      </tr>
      <tr>
          <td>orange</td>
          <td>20</td>
      </tr>
      <tr>
          <td>raspberry</td>
          <td>35</td>
      </tr>
   </tbody>
   <tfoot>
     <tr>
         <td class="cell0 style1"><p style="font-weight:bold;">TOTAL</p></td>
         <td class="cell1 style1"><p style="font-weight:bold;"></p></td>
     </tr>
   </tfoot>
   </table>

How can I sum up all cells in tbody second column and put the result in tfoot cell also second column?

The table is dynamic. I would like to use jquery.

3 Answers 3

1

This would be one way of doing it:

let sum=$("#tblPotrawySkladniki tbody td:nth-child(2)").get().reduce((a,c)=>
  +$(c).text().replace(",",".")+a,0);
$("#tblPotrawySkladniki tfoot td:nth-child(2)").text(sum);
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <table id="tblPotrawySkladniki">
   <thead>
  <tr>
     <td class="cell0 style1"><p style="font-style:italic;">Nazwa produktu</p></td>
     <td class="cell1 style1"><p style="font-style:italic;">Waga [g]</p></td>
  </tr>
   </thead>
   <tbody>
  <tr>
      <td>banana</td>
      <td>10</td>
  </tr>
  <tr>
      <td>orange</td>
      <td>20,3</td>
  </tr>
  <tr>
      <td>raspberry</td>
      <td>35,5</td>
  </tr>
   </tbody>
   <tfoot>
 <tr>
     <td class="cell0 style1"><p style="font-weight:bold;">TOTAL</p></td>
     <td class="cell1 style1"><p style="font-weight:bold;"></p></td>
 </tr>
   </tfoot>
   </table>

Instead of parseInt() my script makes use of implicit type conversion with the unary + operator before $(c).text().

Sign up to request clarification or add additional context in comments.

8 Comments

OK... I got NaN, but I guess this is because I have float like 40,5 instead of 40.5. Where I can put replace(",",".")...?
Look at my edited answer.
well... I copied your code into my table... not as simple one as example... and it calculates weird numbers... i.e. if I ad one row with second column value 1,5 calculated value is 22696.5 Any idea why is that?
if I add second row with cell value 6,0 (sum up should be 7.5 then) calculated number is 22698...
Well, I can only help you on the basis of the code you share here. Maybe you can add the "real" data you are having the problems with? Create a snippet and make a little MCVE
|
1

You can use jQuery .each() to cycle through the second td of each row, access the contents of the element using $(this).text(), then add them up as you go. You should parse the value first so that they will add up as numbers and not concatenate.

let values = 0;

jQuery('table tbody tr td:nth-of-type(2)').each(function(){

    let value = parseInt($(this).text(),10);

    values += value;

});

console.log(values);

Comments

0
<table style="width:920px;" id="tblPotrawySkladniki">
<thead>
    <tr>
        <td class="cell0 style1">
            <p style="font-style:italic;">Nazwa produktu</p>
        </td>
        <td class="cell1 style1">
            <p style="font-style:italic;">Waga [g]</p>
        </td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>banana</td>
        <td> 10</td>
    </tr>
    <tr>
        <td>orange</td>
        <td> <span class='price'>20</span></td>
    </tr>
    <tr>
        <td>raspberry</td>
        <td> <span class='price'>35</span></td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th colspan="2" style="text-align:center"><span id="sum"></span></th>
    </tr>
</tfoot>
    $(document).ready(function() {
        $('.price').each(function(i) {
            calculateColumn(i);
        });
    });

    function calculateColumn(index) {
        var total = 0;
        $('table tr').each(function() {
            var value = parseInt($('.price', this).eq(index).text());
            if (!isNaN(value)) {
                total += value;
            }
        });
        $('#sum').eq(index).text('Total: ' + total);
    }

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.