Jquery从字段计算小计 - 按类别和总和的数量和价格

Question

我已经准备好了jsfiddle

问题是我有很多行包含产品数量 * 价格 = 小计 这还必须动态计算所有小计金额的总计。最大的问题是触发器，因为我们可能在qty 选择字段上没有更改触发器.. 对我来说真的很复杂。 到目前为止，我在这里堆积：

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

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

请给我一些想法：

1. 使用哪个触发器，以便它也可以计算页面加载以及数量下拉列表是否也发生了变化。
2. 如何先计算每一行

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

Answer 1

这里有你的答案：http://jsfiddle.net/kY98p/10/

我更改了 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 总计：http://jsfiddle.net/kY98p/11/

Answer 2

Fiddle Demo

$(document).ready(function () {
    var amt = $('.amount:gt(0)'), //select element with class greater than one
        tot = $('#total'); // cache selectors
    function calculator() {
        amt.text(function () { // set text of class amount elements
            var tr = $(this).closest('tr'); // get tr
            var qty = tr.find('.qty').val(); // find it in current tr and get value of element with class qty
            var price = tr.find('.price').val(); //get price 
            return parseFloat(qty) * parseFloat(price); // return product
        });
        tot.text(function () {  //get total
            var sum = 0; //set sum = 0
            amt.each(function () { //run through all element with class amount
                sum += parseFloat($(this).text()); // add text to sum
            });
            return sum;  //set sum to total
        });
    }
    calculator(); //call the above function
    $('.qty,.price').change(calculator);// run calculator function when element with class qty or price is changed
});

Answer 3

你可以试试这个（我改变了你的 html 模板）。解决方案按您的意愿工作： 1.计算每一行（找到最接近的输入并从中获取数据） 2.计算总和放跨度 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>

还有work demo

Answer 4

这是一个与您的小提琴 (http://jsfiddle.net/kY98p/20/) 配合使用的解决方案，只需进行一次小的 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();

});