Question

我准备了这个jsfiddle

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

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

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

请给我一个想法：

使用哪个触发器，因此它也可以计算页面加载以及是否更改了数量下拉列表。
如何先计算每一行

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

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

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

work demo

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

4 个答案: