Sum colum值使用JQuery在几个表中获得总数

Question

我生成多个表，结构相同但值不同，在php / mysql中有一个循环。我有一个脚本来汇总所有值并显示结果，但仅当值在同一行时才有效。我只需要总结一下“precio”栏目。

这是一个HTML。这是表格的结构：

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

<script type="text/javascript">

  $(document).ready(function () {

    $('tr').each(function () {

        var sum = 0

        $(this).find('.precio').each(function () {
            var precio = $(this).text();
            if (!isNaN(precio) && precio.length !== 0) {
                sum += parseFloat(precio);
            }
        });

        $('.total_prt', this).html(sum);
    });
});
</script>
       <table class="table table-striped">
                <thead>
                    <tr>
                        <th width="70%">Descripción</th>
                        <th width="20%">Precio</th>
                     </tr>
                </thead>
                <tbody>
                    <tr>
                     <td>Display</td>
                     <td class="precio">1300</td>
                     </tr>
                     <tr>
                     <td>Keyboard</td>
                     <td class="precio">300</td>
                     </tr> 
                    <tr>
                      <td><b>Total:</b></td>
                      <td class="total_prt"><b>$</b></td>
                    </tr>
                   </tbody>
            </table>
<br>

 <table class="table table-striped">
                <thead>
                    <tr>
                        <th width="70%">Descripción</th>
                        <th width="20%">Precio</th>
                       </tr>
                </thead>
                <tbody>
                    <tr>
                      <td>HDD</td>
                      <td class="precio">400</td>
                      </tr>
                      <tr>
                      <td>System</td>
                      <td class="precio">425</td>
                      </tr> 
                      <tr>
                      <td>Something</td>
                      <td class="precio">350</td>
                      </tr> 
                      <tr>
                      <td><b>Total:</b></td>
                      <td class="total_prt"><b>$</b></td>
                    </tr>
                    </tbody>
            </table>

Answer 1

您需要单独遍历所有表，并在表循环外部初始化sum，而不是在其中。

＆＃13;

＆＃13;

$(document).ready(function() {

  $('.table').each(function() {
    var sum = 0
    $(this).find('tr').each(function() {



      $(this).find('.precio').each(function() {
        var precio = $(this).text();
        if (!isNaN(precio) && precio.length !== 0) {
          sum += parseFloat(precio);
        }
      });

      $('.total_prt', this).html(sum);
    });
  })

});

＆＃13;

<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="70%">Descripción</th>
      <th width="20%">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Display</td>
      <td class="precio">1300</td>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td class="precio">300</td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total_prt"><b>$</b></td>
    </tr>
  </tbody>
</table>
<br>

<table class="table table-striped">
  <thead>
    <tr>
      <th width="70%">Descripción</th>
      <th width="20%">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HDD</td>
      <td class="precio">400</td>
    </tr>
    <tr>
      <td>System</td>
      <td class="precio">425</td>
    </tr>
    <tr>
      <td>Something</td>
      <td class="precio">350</td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total_prt"><b>$</b></td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你这样做，它会起作用。

$(document).ready(function () {
   $('.table').each(function (i, elem) {
     var totalPrice = 0;
     $(elem).find("td.precio").each(function(j, elem2) {
       totalPrice += parseFloat($(elem2).html());
     })
     $(elem).find(".total_prt").html(totalPrice);

   });
});

Answer 3

＆＃13;

＆＃13;

$('body').find('table').each(function() {
  var sum = 0;
  $(this).find('tr').each(function() {
    $(this).find('td').each(function() {
      if ($(this).hasClass('precio')) {
        var precio = $(this).text();
        if ($.isNumeric(precio)) {
          sum += parseFloat(precio);
        }
      }
    });
  });
  $(this).find('td.total_prt').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="70%">Descripción</th>
      <th width="20%">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Display</td>
      <td class="precio">1300</td>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td class="precio">300</td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total_prt"><b>$</b></td>
    </tr>
  </tbody>
</table>
<br>

<table class="table table-striped">
  <thead>
    <tr>
      <th width="70%">Descripción</th>
      <th width="20%">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HDD</td>
      <td class="precio">400</td>
    </tr>
    <tr>
      <td>System</td>
      <td class="precio">425</td>
    </tr>
    <tr>
      <td>Something</td>
      <td class="precio">350</td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total_prt"><b>$</b></td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我所做的是循环遍历total元素，并将所有precio元素文本相加以输出总数。

＆＃13;

＆＃13;

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

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

＆＃13;

<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="70%">Descripción</th>
      <th width="20%">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Display</td>
      <td class="precio">1300</td>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td class="precio">300</td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total_prt"><b>$</b></td>
    </tr>
  </tbody>
</table>
<br>

<table class="table table-striped">
  <thead>
    <tr>
      <th width="70%">Descripción</th>
      <th width="20%">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HDD</td>
      <td class="precio">400</td>
    </tr>
    <tr>
      <td>System</td>
      <td class="precio">425</td>
    </tr>
    <tr>
      <td>Something</td>
      <td class="precio">350</td>
    </tr>
    <tr>
      <td><b>Total:</b></td>
      <td class="total_prt"><b>$</b></td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 5

您同时将var sum = 0;和$('.total_prt', this).html(sum)置于错误的位置 - 您需要将它们移动到外面 $('tr').each(...)循环。