使用jquery计算总值答案

【问题标题】：Calculate total value using jquery使用jquery计算总值
【发布时间】：2018-01-27 10:48:19
【问题描述】：

我有一张如下表：

 <table>
    <th>Sl No</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Discount %</th>
    <th>Total Price</th>
    <tr>
    <td>1</td>
    <td><input class="expensess" ></input></td>
    <td><input class="expensess" ></input></td>
    <td><input class="expensess" ></input></td>
    <td><input class="expensess_sum"></input></td>
    </tr>
    <tr>
    <td>2</td>
    <td><input class="expensess" ></input></td>
    <td><input class="expensess" ></input></td>
    <td><input class="expensess" ></input></td>
    <td><input class="expensess_sum"></input></td>
    </tr>
    </table>

Grand Total = <input id="grand_total">

我正在尝试使用 jquery keyup 函数显示每一行的总价格。并且还想显示每一行的总价。求总价的公式如下：

discount_value = Price*(discount_percent/100)
discount_price = Price-discount_value
total_price = discount_price * quantity

我该怎么做，请帮忙

我正在尝试像这样简单地将所有值相加：

<script type="text/javascript">

 $(document).ready(function(){
    $(".expensess").each(function() {

        $(document).on('keyup', '.expensess', function() {
            sum($(this).parents("tr"));
      });
    });
});
function sum(parent){
    var sum = 0;
    $(parent).find(".expensess").each(function(){
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    $(parent).find(".expensess_sum").val(sum.toFixed(2));
}
</script>

但是我很困惑如何实现上述计算总价的公式。

【问题讨论】：

keyup?分享你的完整js

标签： javascript jquery html

【解决方案1】：

$('input.qty,input.price,input.discount').on('change keyup',function(){
  var $tr = $(this).closest('tr'),
      $qty = $tr.find('input.qty')      ,
      $price= $tr.find('input.price'),
      $discount= $tr.find('input.discount'),
      $total= $tr.find('input.expensess_sum'),
      $grand_total=$('#grand_total');
      
      $total.val($qty.val()*($price.val()-($price.val()*($discount.val()/100))));
      
      var grandTotal=0;
      $('table').find('input.expensess_sum').each(function(){
          if(!isNaN($(this).val()))
            {grandTotal += parseInt($(this).val()); 
            }
      });
      if(isNaN(grandTotal))
         grandTotal =0;
      $grand_total.val(grandTotal)
})

input{
   width:80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <table>
    <tbody><tr>
      <th>Sl No</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Discount %</th>
      <th>Total Price</th>
    </tr>
    <tr>
      <td>1</td>
      <td><input class="expensess qty"></td>
      <td><input class="expensess price"></td>
      <td><input class="expensess discount"></td>
      <td><input class="expensess_sum" disabled=""></td>
    </tr>
    <tr>
      <td>2</td>
      <td><input class="expensess qty"></td>
      <td><input class="expensess price"></td>
      <td><input class="expensess discount"></td>
      <td><input class="expensess_sum" disabled=""></td>
    </tr>
    </tbody></table>

Grand Total = <input id="grand_total" disabled="">
  
</body>

【讨论】：

是否可以同时得到总值

【解决方案2】：

使用简单的java脚本代码做到了！

            var sumExpenses = 0;
            var tdBudget = document.getElementById('tableBudget').getElementsByTagName('td');

            for (var i = 0; i < tdBudget.length; i++) {

              if (tdBudget[i].className == "spanexpense") {
                sumExpenses += isNaN(tdBudget[i].innerHTML) ? 0 : parseInt(tdBudget[i].innerHTML);
              }
            }
            document.getElementById('sumExpenses').innerHTML = sumExpenses;

<table class="table table-bordered">
        <thead>
          <tr>
            <td class="label-title">Value</td>
            <td class="label-title">Value</td>
            <td class="label-title">Value</td>
          </tr>
        </thead>
        <tbody id="tableBudget">

          <tr>
            <td class="spanexpense">
             12
            </td>
            <td class="spanexpense">
              23
            </td>
            <td class="spanexpense">
              23
            </td>
          </tr>

        </tbody>
        <tfoot>
          <tr>
            <td>Sum</td>
            <td id="sumExpenses"></td>
          </tr>
        </tfoot>
      </table>

小提琴https://jsfiddle.net/ey2gLp7t/

【讨论】：