How can I sum up second column in html table using jquery-CodePudding

There is a table:

   <table style="width:920px;" id="tblPotrawySkladniki">
   <thead>
      <tr>
         <td ><p style="font-style:italic;">Nazwa produktu</p></td>
         <td ><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 ><p style="font-weight:bold;">TOTAL</p></td>
         <td ><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.

CodePudding user response：

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 ><p style="font-style:italic;">Nazwa produktu</p></td>
     <td ><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 ><p style="font-weight:bold;">TOTAL</p></td>
     <td ><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().

CodePudding user response：

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

CodePudding user response：

<table style="width:920px;" id="tblPotrawySkladniki">
<thead>
    <tr>
        <td >
            <p style="font-style:italic;">Nazwa produktu</p>
        </td>
        <td >
            <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);
    }