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();
});

更新：总计：http://jsfiddle.net/kY98p/11/

Answer 2

小提琴演示

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

和工作演示

Answer 4

这是一个解决方案，可以通过一个小的 DOM 更新与您的小提琴 （http://jsfiddle.net/kY98p/20/） 一起使用。 我将表的标题放在 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();
});