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()定位）

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

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

使用javascript卡住

1 个答案: