Javascript Jquery根据字段计算小计-按类别和总计计算数量和价格

我已经准备好了

问题是我有很多行包含产品数量*价格=小计 这还必须动态计算所有小计金额的总计。最大的问题是触发器，因为在

qty

select字段上可能没有change触发器。。对我来说真的很复杂。 到目前为止，我在这里：

$(document).ready(function() {    
    var qty=$('.qty').val();
    var price = $('.price').val();
    var sum = 0;

    $('.amount').each(function() {
        sum += parseFloat($(this).text());
    });
});

请告诉我以下方面的想法：

要使用哪个触发器，以便它也可以计算页面加载以及数量下拉列表是否也更改

如何先计算每一行

感谢您的帮助和提前的时间

---

下面是一个与fiddle（）配合使用的解决方案，只需进行一次较小的DOM更新。我将表的标题放在一个THEAD中，这样您就可以将TBODY TR行计算为包含数据的行

这里我们有函数来计算每一行和整个表的总和。 当您更改一行时，我们将重新计算该行，然后重新计算总数。 加载页面时，我们会重新计算所有内容

$(document).ready(function () {

    function computeRowTotal(row) {
        var $row = $(row)
        var qty = $row.find('.qty').val();
        var price = $row.find('.price').val();
        if (qty && price) {
            $row.find('.amount').html(qty * price);
        }
    }

    function computeTotal() {
        var total = 0.0
        $('tbody tr .amount').each(function () {
            console.log('T', $(this).text());
            total += parseFloat($(this).text());
        })
        $('tbody tr .total').html("Total: " + total);
    }

    function updateTable() {
        $('tbody tr').each(function (row) {
            computeRowTotal(this)
        });
        computeTotal(this)
    };
    $('select').bind('change', function () {
        computeRowTotal($(this).closest('tr'));
        computeTotal();
    });

    updateTable();

});

你可以试试这个（我改变了你的html模板）。解决方案可根据您的需要工作： 1.计算每一行（找到最近的输入并从中获取数据） 2.计算总数并将其放入span 3.如果您将添加更多选定的（与我的工作类），这将是工作

$(".work").on("change", function(){
      var total = 0;
      $(".work").each(function(){
          var val = $(this).closest("tr").find("input[type='text']").val();
          total = total + ($(this).val()*val || 0);
      });
      $(".total").text(total);
    });

和html

<table>
  <tbody>
    <tr>
      <th>Product name</th>
      <th>Qty</th>
      <th>Price</th>
      <th align="center"><span id="amount" class="amount">Amount</span></th>
    </tr>
    <tr>
       <td>Product 1</td>
       <td>
         <select value="" class="qty work" name="qty">
           <option value="1">1</option>
           <option value="2">2</option>
         </select>
        </td>
        <td><input type="text" value="11.60" class="price"></td>
        <td align="center"><span id="amount" class="amount">0</span> eur</td></tr>
     <tr>
       <td>Product 2</td><td>
         <select value="" class="qty work" name="qty">
           <option value="1">1</option>
           <option value="2">2</option>
         </select>
       </td> 
       <td><input type="text" value="15.26" class="price"></td>
       <td align="center"><span id="amount" class="amount">0</span> eur</td></tr>
    <tr>
       <td colspan="2"></td>
       <td align="right"><span id="total" class="total">TOTAL</span> </td>
    </tr>
  </tbody>
</table>

产品名称
数量
价格
数量
产品1
1.
2.
0欧元
产品2
1.
2.
0欧元
全部的

---

你在这里有你的答案：

我更改了html，将标签thead和tfoot用于页眉和页脚

这只是一个循环，在那里你可以得到数量和价格，并更新金额

以下是您应该调用的函数：

function update_amounts()
{
    var sum = 0.0;
    $('#myTable > tbody  > tr').each(function() {
        var qty = $(this).find('option:selected').val();
        var price = $(this).find('.price').val();
        var amount = (qty*price)
        sum+=amount;
        $(this).find('.amount').text(''+amount);
    });
    //just update the total to sum  
    $('.total').text(sum);
}

您需要的活动是：

$('.qty').change(function() {
    update_amounts();
});

---

更新：jsfiddle，总计：

Tushar，首先感谢您！你确定它在工作吗？我测试过，甚至改变触发器都不起作用。。请检查此@thecore7 yes it is check-->在函数

down vote accept

之前，它没有作为添加的额外文本工作，现在一切正常！我接受！非常感谢你！谢谢大家！回答..@thecore7欢迎您，很高兴它对您有所帮助。您的解决方案是最短的！做得好，但不计算页面负载？还是我错了？当然算数了。只需在$（文档）中调用update_amounts（）。准备好了吗。。。检查jsfiddle；）我为您添加注释，因为您没有可插入总计的字段。。。如果要将“TOTAL”替换为sum，只需添加：$（“.TOTAL”）.text（sum）；你是伴郎。。我也接受你的答案并投赞成票！非常感谢。“：）何塞，你还在这儿吗

$('.qty').change(function() {
    update_amounts();
});