javascript - 用JQuery获取几个表的运行余额

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

好吧，评论中的人说得对，如果产品价格不变，您应该在循环时将其呈现在服务器端。

无论如何，这将完成工作:

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

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