Q:

Sum up table columns in a loop using javascript stuck

I have a loop where i want display tables and calculate the sum here is html
@for (int i = 0; i < 3; i++) { 
    <table id="table @i" class="tableSum">
        <thead>
            <tr>
                <td>Items</td> 
                <td>Quantity</td>
                <td>Price</td>
            </tr>
        </thead>
        <tbody>
           <tr>
               <td>Apple</td>
               <td>5</td>
               <td>100</td>
           </tr>
            <tr>
               <td>Organe</td>
               <td>5</td>
               <td>200</td>
           </tr>
           <tr>
               <td>Banana</td>
               <td>5</td>
               <td>200</td>
           </tr>
        </tbody>
        <tfoot>
            <tr>
               <td>Total</td>
               <td></td>
               <td></td>
           </tr>
        </tfoot>
    </table>
}

In javascript i wrote this code, I want the method can sum up all data in column 2 and 3 then display on the footer of each table in a loop, but when i run this code, it returned wrong sum and only display in 1st table.
$(document).ready(function () {
    $('table').each(function () {
        calculateColumn(1);
        calculateColumn(2);
    })
});

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

A:

When you say $('table tr').each(), it iterates over all the tr elements in the page, not just the one's in the current table(which is targeted by $('table').each())
You need to pass the table reference to the calculate method

$(document).ready(function() {
  $('table').each(function() {
    calculateColumn(this, 1);
    calculateColumn(this, 2);
  })
});

function calculateColumn(table, index) {
  var total = 0;
  $(table).find('tbody td:nth-child(' + (index + 1) + ')').each(function() {
    total += +$(this).text() || 0;
  });
  $(table).find('tfoot td').eq(index).text(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table1" class="tableSum">
  <thead>
    <tr>
      <td>Items</td>
      <td>Quantity</td>
      <td>Price</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>6</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Organe</td>
      <td>6</td>
      <td>150</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>3</td>
      <td>75</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>
<table id="table1" class="tableSum">
  <thead>
    <tr>
      <td>Items</td>
      <td>Quantity</td>
      <td>Price</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>5</td>
      <td>120</td>
    </tr>
    <tr>
      <td>Organe</td>
      <td>4</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>5</td>
      <td>300</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>
<table id="table1" class="tableSum">
  <thead>
    <tr>
      <td>Items</td>
      <td>Quantity</td>
      <td>Price</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>10</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Organe</td>
      <td>5</td>
      <td>300</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>5</td>
      <td>300</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

