Question

我有几个具有相同结构的表。它有不同的价格价值。我想获得价格列的运行余额。所以我想得到总和并在运行余额列中打印每次迭代。例如。在价格栏中我有400,425和350所以在运行平衡栏中，我应该有400,825,1175。目前，我只得到总和。

这是我的HTML

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<table class="table table-striped">
  <thead>
    <tr>
      <th width="60%">Item</th>
      <th width="20%">Price</th>
      <th width="20%">Running Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bacon</td>
      <td class="price">1300</td>
      <td class="runningBal"></td>
    </tr>
    <tr>
      <td>Pancakes</td>
      <td class="price">300</td>
       <td class="runningBal"></td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total"><b>$</b></td>
       <td class="totalBal"></td>
    </tr>
  </tbody>
</table>
<br>

<table class="table table-striped">
  <thead>
    <tr>
      <th width="60%">Item</th>
      <th width="20%">Price</th>
      <th width="20%">Running Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Fries</td>
      <td class="price">400</td>
      <td class="runningBal"></td>
    </tr>
    <tr>
      <td>Nuggets</td>
      <td class="price">425</td>
      <td class="runningBal"></td>
    </tr>
    <tr>
      <td>Ice Cream</td>
      <td class="price">350</td>
      <td class="runningBal"></td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total"><b>$</b></td>
      <td class="totalBal"></td>
    </tr>
  </tbody>
</table>

这是我的javascript

$('.runningBal').each(function() {
  var sum = 0;
  $(this).parents('table').find('.price').each(function() {
    var floted = parseFloat($(this).text());
    if (!isNaN(floted)) sum += floted;

    $('.runningBal').html(sum);
  })

  //$(this).html(sum);
});

以下是fiddle

Answer 1

评论中的人们说得对，如果产品价格不变，你应该在循环时将其渲染到服务器端。

无论如何，这将完成这项工作：

＆＃13;

$("table").each(function() {
  var sum = 0;
  $(this).find(".runningBal").each(function() {
  	sum += +$(this).prev(".price").text();
    $(this).text(sum);
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
  <thead>
    <tr>
      <th width="60%">Item</th>
      <th width="20%">Price</th>
      <th width="20%">Running Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bacon</td>
      <td class="price">1300</td>
      <td class="runningBal"></td>
    </tr>
    <tr>
      <td>Pancakes</td>
      <td class="price">300</td>
       <td class="runningBal"></td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total"><b>$</b></td>
       <td class="totalBal"></td>
    </tr>
  </tbody>
</table>
<br>

<table class="table table-striped">
  <thead>
    <tr>
      <th width="60%">Item</th>
      <th width="20%">Price</th>
      <th width="20%">Running Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Fries</td>
      <td class="price">400</td>
      <td class="runningBal"></td>
    </tr>
    <tr>
      <td>Nuggets</td>
      <td class="price">425</td>
      <td class="runningBal"></td>
    </tr>
    <tr>
      <td>Ice Cream</td>
      <td class="price">350</td>
      <td class="runningBal"></td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total"><b>$</b></td>
      <td class="totalBal"></td>
    </tr>
  </tbody>
</table>

＆＃13;

使用JQuery获取多个表的运行平衡

1 个答案: