javascript - 使用javascript卡住循环中汇总表列

Question

我有一个循环，我想在其中显示表格并计算总和，这里是 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>
}

在javascript中，我编写了这段代码，我希望该方法可以汇总第2列和第3列中的所有数据，然后循环显示在每个表的页脚上，但是当我运行此代码时，它返回错误的总和并且仅显示在第一个表中。

$(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);
}

Answer 1

当您说 $('table tr').each() 时，它会迭代页面中的所有 tr 元素，而不仅仅是当前的元素table(由 $('table').each() 定位)

您需要将表引用传递给计算方法

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