0

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

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

http://jsfiddle.net/T5xtL/

在这里，用户只能从 3 种不同的水果（苹果、香蕉、芒果）中选择，然后为每种输入一个数量。一旦用户选择水果和/或输入数量，我想自动计算每种水果的总数。在我的示例中，总数为：

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

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

感谢是否有人可以启发我如何实现这一目标，或者您是否可以指出任何类似的示例。我是 Javascript 的新手。

4

5 回答 5

1

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

// 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 );
} );
于 2012-06-19T07:18:08.340 回答
1 
$().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']);

});​

this is example and check this link also http://jsfiddle.net/T5xtL/7/

于 2012-06-19T07:17:02.287 回答
1

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

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

​</p>

于 2012-06-19T07:13:31.493 回答
1

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]);
        }                
    }
}
​
于 2012-06-19T07:22:06.220 回答
0

在 KnockoutJS 上阅读本教程。与 JQuery 相比，Knockout 更适合使用模型。（他们互相称赞）。

于 2012-06-19T07:07:02.273 回答