Jquery从字段计算子总数 - 按类别和数量计算总数和总和

Question

我准备了这个jsfiddle

问题是我有很多行包含产品数量* price = sub total这也必须动态计算所有子总量的总计。 最大的问题是触发因为我们可能没有在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

小提琴演示

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

这是一个与您的小提琴（ 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();

});

Answer 4

你可以尝试这个（我改变了你的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>

并且工作演示