JQueryで表計算 | テクニカルノート

商品のオーダー画面で数を入力すると、合計をその場で表示したくてJQueryで。

input でname属性にitemid[]ではなくて、itemid[11]などとしているのは、post送信時に配列インデックスをidにして渡したかったから。
でもそれだとeachで扱えなかったので、かわりにclassにitemid[]をいれて対処。

<table>
	<tr><th>品名</th><th>単価</th><th>数量</th><th>増やす</th><th>減らす</th></tr>
	<tr id="itemid11" class="delivery" itemid="11"><td>クリームパン</td>
		<td><span class="item_price" value="190">190</span></td>
		<td><input type="text" id="oder_itemid11" class="itemid[]" name="itemid[11]" value="0"></td>
		<td><input type="button" name="plus" class="plus" value="＋"></td>
		<td><input type="button" name="minus" class="minus" value="－"></td></tr>
	<tr id="itemid12" class="delivery" itemid="12"><td>カレーパン</td>
		<td><span class="item_price" value="350">350</span></td>
		<td><input type="text" id="oder_itemid12" class="itemid[]" name="itemid[12]" value="0"></td>
		<td><input type="button" name="plus" class="plus" value="＋"></td>
		<td><input type="button" name="minus" class="minus" value="－"></td></tr>
	<tr id="itemid13" class="delivery" itemid="13"><td>アンパン</td>
		<td><span class="item_price" value="320">320</span></td>
		<td><input type="text" id="oder_itemid13" class="itemid[]" name="itemid[13]" value="0"></td>
		<td><input type="button" name="plus" class="plus" value="＋"></td>
		<td><input type="button" name="minus" class="minus" value="－"></td></tr>
	<tr id="itemid14" class="delivery" itemid="14"><td>メロンパン</td>
		<td><span class="item_price" value="230">230</span></td>
		<td><input type="text" id="oder_itemid14" class="itemid[]" name="itemid[14]" value="0"></td>
		<td><input type="button" name="plus" class="plus" value="＋"></td>
		<td><input type="button" name="minus" class="minus" value="－"></td></tr>
	<tr><td>合計</td>
		<td></td>
		<td><span id="totalPrice">0</span>円</td>
		<td></td>
		<td></td></tr>
</table>

<table>

<tr id="itemid11" class="delivery" itemid="11"><td>クリームパン</td>

<tr id="itemid12" class="delivery" itemid="12"><td>カレーパン</td>

<tr id="itemid14" class="delivery" itemid="14"><td>メロンパン</td>

</table>

jQuery(function( $ ) {
    //+ボタンをクリックした時
    $( 'tr.delivery td input.plus' ).on( 'click', function(){
        var itemid = $(this).parents("tr").attr('itemid');
        var count = $('tr.delivery td input#oder_itemid'+itemid).val();
        if (count<99){ count++; }
        $('tr.delivery td input#oder_itemid'+itemid).val(count) ;
        calTotal();
        return false;
    });

	//-ボタンをクリックした時
    $( 'tr.delivery td input.minus' ).on( 'click', function(){
        var itemid = $(this).parents("tr").attr('itemid');
        var count = $('tr.delivery td input#oder_itemid'+itemid).val();
        if (count>0){ count--; }
        $('tr.delivery td input#oder_itemid'+itemid).val(count) ;
        calTotal();
        return false;
    });
    
    //合計の計算
    function calTotal() {
         var oderTotalPrice = 0;
         var oderTotalNum = 0;
         $( 'tr.delivery' ).each(function(i, val) {
            $item =$(this).find('td .item_price');
            var price = parseInt($(this).find('.item_price').html());
            var num = $(this).find("input[class='itemid[]']").val();
            oderTotalPrice += price * num;
            oderTotalNum += num;
        });
        $( 'span#totalPrice' ).html(oderTotalPrice.toString());
     } 
	
	//初めに表示した時に計算
	calTotal();
});

jQuery(function( $ ) {

//+ボタンをクリックした時

$( 'tr.delivery td input.plus' ).on( 'click', function(){

var itemid = $(this).parents("tr").attr('itemid');

var count = $('tr.delivery td input#oder_itemid'+itemid).val();

if (count<99){ count++; }

$('tr.delivery td input#oder_itemid'+itemid).val(count) ;

calTotal();

return false;

});

//-ボタンをクリックした時

$( 'tr.delivery td input.minus' ).on( 'click', function(){

var itemid = $(this).parents("tr").attr('itemid');

var count = $('tr.delivery td input#oder_itemid'+itemid).val();

if (count>0){ count--; }

$('tr.delivery td input#oder_itemid'+itemid).val(count) ;

calTotal();

return false;

});

//合計の計算

function calTotal() {

var oderTotalPrice = 0;

var oderTotalNum = 0;

$( 'tr.delivery' ).each(function(i, val) {

$item =$(this).find('td .item_price');

var price = parseInt($(this).find('.item_price').html());

var num = $(this).find("input[class='itemid[]']").val();

oderTotalPrice += price * num;

oderTotalNum += num;

});

$( 'span#totalPrice' ).html(oderTotalPrice.toString());

}

//初めに表示した時に計算

calTotal();

});

品名	単価	数量
クリームパン	190
カレーパン	350
アンパン	320
メロンパン	230
合計		2190円