0

ユーザーが選択メニューから選択して、次の列に数量を入力できる単純なHTMLテーブルがあります。

選択ごとにQTY列の合計を自動的に計算できるようにする必要があります。行数は固定されていませんが、常に少なくとも1行になります。ここにテーブルの簡略版を作成しました。

http://jsfiddle.net/T5xtL/

ここでは、ユーザーは3つの異なる果物（アップル、バナナ、マンゴー）からのみ選択し、それぞれの数量を入力できます。ユーザーが果物を選択したり、数量を入力したりしたら、各果物の合計を自動的に計算したいと思います。私の例では、合計は次のようになります。

リンゴの合計：20バナナの合計：30マンゴーの合計：5

これが役立つ場合は、jQueryを使用できてうれしいです-私は検索してきましたが、選択メニューから各行の選択数をカウントし、その行の別の列の合計を計算する同様のソリューションの例を見つけることができません。

誰かがこれを達成する方法について私に教えてくれるかどうか、またはあなたが同様のことをする例を指摘できるかどうかを感謝します。私はJavascriptを初めて使用します。

4

5 に答える 5

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 
$().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/

于 2012-06-19T07:17:02.287 に答える
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

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でこのチュートリアルを実行してください。Knockoutは、JQueryよりもモデルの操作に適しています。（彼らはお互いを褒め合っています）。

于 2012-06-19T07:07:02.273 に答える