Question

我有一个简单的HTML表格，允许用户从选择菜单中进行选择，然后在下一栏中输入数量。

我需要能够自动计算每个选择的QTY列的总数 - 行数不固定但总是至少为1行。我在这里创建了一个简化版本的表格：

http://jsfiddle.net/T5xtL/

在这里，用户只能从3种不同的水果中选择（Apple，Banana，Mango），然后为每种水果输入一个QTY。一旦用户做出水果选择和/或进入QTY，我想自动计算每个水果的总量。在我的例子中，总数将是：

总苹果：20 总香蕉：30 芒果总数：5

我很高兴使用jQuery如果这有帮助 - 我一直在搜索并且找不到类似解决方案的示例，该解决方案从选择菜单计算每行中的选择数，然后计算另一列的总数在那一行。

感谢是否有人可以告诉我如何实现这一点，或者你是否可以指出任何类似的例子。我是Javascript的新手。

Answer 1

我添加了一个苹果总和的例子。请参阅此example。

$('.qty').change(function(){
    sumApples();
});
$('.fruit').change(function(){
    sumApples();
});

function sumApples(){
    var totalApples = 0;
    $('#fruits').find('select').each(function(){
        if ($(this).val() == 'Apple'){
            var q = $(this).parent('td.fruit').next('td').find('.qty').val();
            totalApples += parseInt(q);
        }
    });
    $('#sumApples').html(totalApples);
}

Answer 2

$().ready(function(){

   var fruit=[];

 $('table select').each(function(){
    if(!fruit[$(this).find('option:selected').text()])      
        fruit[$(this).find('option:selected').text()]=0; 
        fruit[$(this).find('option:selected').text()]+=parseInt($(this).parent().next().find('.qty').val());

});

 $('#sumApples').text(fruit['Apple']);
 $('#sumBananas').text(fruit['Banana']);
 $('#sumMangoes').text(fruit['Mango']);

});

这是示例，也请检查此链接 http://jsfiddle.net/T5xtL/7/

Answer 3

我只会向您展示香蕉的样品，我相信您会知道如何为您的其他产品推广。

// Filter only returns the values where the inner function returns true
var bananas = $( '.fruits' ).filter( function() {

    // this selector returns the selected options
    if ( $( ':selected', this ).val() === 'Banana' ) {
         return true;
    }
}

// Now, for each banana, get its quantity, and add to the total
bananas.each( function() {
    // Get the quantity
    var qty = $( this ).next().find( 'input' ).val();

    // Add it to the bananas quantity
    // parseInt transforms a text to an integer
    var qty = qty + parseInt( $( '#sumBananas' ).text(), 10 );

    // And set the quantity in the "sumBananas" span
    $( '#sumBananas' ).text( qty );
} );

Answer 4

http://jsfiddle.net/T5xtL/12/

$('#fruits')
    .on('change', 'select', calc)
    .on('keyup', 'input', calc);

$(document).ready(calc);

function calc(){
    var total = {};
    $('#fruits tr:has(.fruit)').each(function(){

       var $t = $(this), 

           // val : Apple | Banana | Mango
           val = $t.find('.fruit select').val(),
           qty = $t.find('input').val();

        // the qty
        qty = Number(qty);
        qty = isNaN(qty)?0:qty;

        if(!total.hasOwnProperty(val)) total[val] = 0;
        total[val] += qty;
    });

    // you would be updating the actual html here.    
    for(val in total){
        if(total.hasOwnProperty(val)){
    // NOTE that I change your 'sumApples' to 'sumApple' which follows convention of 'sum' + { the name of the fruit }
            $('#sum' + val).html(total[val]);
        }                
    }
}

Answer 5

在KnockoutJS上浏览this tutorial。 Knockout比JQuery更适合使用Models。（他们互相称赞）。

从选择菜单选项中获取总计到另一个表格单元格

5 个答案: