javascript - 使用jquery计算总值(value)

标签 javascript jquery html

我有一个如下表:

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

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

最佳答案

enter image description here

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

关于javascript - 使用jquery计算总值(value),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48474983/

相关文章:

html - 如何正确设置 amp-img 的宽度和高度属性

javascript - 也从 iframe 接收 mousemove 事件

javascript - 如何清除 Chosen.js 多选下拉列表中的所有项目?

css - HTML5 中的内联自定义 CSS 字体

jquery - 在全屏 Bootstrap Carousel 中 float 白色背景

jquery - html jquery.load,动态文件名

javascript - Bootstrap 模态仅显示背景

javascript - document.getElementById innerHTML 不显示

javascript - YUI 有官方的 irc channel 吗?

Javascript 方法崩溃 - 我只是不明白为什么