Q&A
外部サービスだけでなく本文内にもコードを提示してください。
##わからないこと
いつもお世話になっております。
この度、列の合計値を足し合わせて、小計に出力する処理を書こうとしているのですが、合計の計算がうまくいっておりません。
目的は「.price」の列に書き込まれた値をすべて合算することにあります。
「.price」に値が書き込まれたら、即時で反映されるようにしたいと考えております。
ご教授いただければ幸いです。
###コード
html
1<div style="padding-top:40px;"> 2 <table style="width: 90%;" class="invoice-table"> 3 <thead> 4 <tr class="billing-title"> 5 <th style="border:none;background-color: #ffffff;"></th> 6 <th>品番・品名</th> 7 <th>数量、単位</th> 8 <th>単価</th> 9 <th>金額</th> 10 </tr> 11 </thead> 12 <tbody> 13 <tr class="table-solid table-input tbl-cnt"> 14 <td class="hide-td"> 15 <div class="hide-btn delete-btn"><span href="#" name="delete" class="delete btn btn-success"><i class="fa fa-times fa-fw"></i></span></div> 16 </td> 17 <td><input type="text" name="item" class="item" style="margin:10px;width: 450px;"></td> 18 <td><input type="text" name="num" class="num" style="margin:10px;"></td> 19 <td><input type="text" name="unit-price" class="unit-price" style="margin:10px;"></td> 20 <td><input type="text" name="price" class="price" style="margin:10px;"></td> 21 </tr> 22 <tr class="table-solid table-input tbl-cnt"> 23 <td class="hide-td"> 24 <div class="hide-btn delete-btn"><span href="#" name="delete" class="delete btn btn-success"><i class="fa fa-times fa-fw"></i></span></div> 25 </td> 26 <td><input type="text" name="item" class="item" style="margin:10px;width: 450px;"></td> 27 <td><input type="text" name="num" class="num" style="margin:10px;"></td> 28 <td><input type="text" name="unit-price" class="unit-price" style="margin:10px;"></td> 29 <td><input type="text" name="price" class="price" style="margin:10px;"></td> 30 </tr> 31 <tr class="table-solid table-input tbl-cnt"> 32 <td class="hide-td"> 33 <div class="hide-btn delete-btn"><span href="#" name="delete" class="delete btn btn-success"><i class="fa fa-times fa-fw"></i></span></div> 34 </td> 35 <td><input type="text" name="item" class="item" style="margin:10px;width: 450px;"></td> 36 <td><input type="text" name="num" class="num" style="margin:10px;"></td> 37 <td><input type="text" name="unit-price" class="unit-price" style="margin:10px;"></td> 38 <td><input type="text" name="price" class="price" style="margin:10px;"></td> 39 </tr> 40 <tr class="table-solid table-input tbl-cnt"> 41 <td class="hide-td"> 42 <div class="hide-btn delete-btn"><span href="#" name="delete" class="delete btn btn-success"><i class="fa fa-times fa-fw"></i></span></div> 43 </td> 44 <td><input type="text" name="item" class="item" style="margin:10px;width: 450px;"></td> 45 <td><input type="text" name="num" class="num" style="margin:10px;"></td> 46 <td><input type="text" name="unit-price" class="unit-price" style="margin:10px;"></td> 47 <td><input type="text" name="price" class="price" style="margin:10px;"></td> 48 </tr> 49 <tr class="table-solid table-input"> 50 <td style="border:none;"></td> 51 <td style="border:none;text-align: center;"> 52 <span href="#" id="add-row" class="btn btn-success" style="margin-top: 5px;padding: 3px 3px; font-size: 11px;"> 53 <i class="fa fa-plus fa-fw"></i>行の追加<span style="font-size:10px;">※最大で20行まで増やせます。</span> 54 </span> 55 </td> 56 <td style="border: 1px solid #bab9b9;text-align:center;height: 40px;" colspan="2">小計</td> 57 <td><input type="text" name="tiny-sum" class="tiny-sum" style="margin:10px;" readonly="readonly"></td> 58 </tr> 59 <tr class="table-solid table-input"> 60 <td style="border:none;"></td> 61 <td style="border:none;"></td> 62 <td style="border: 1px solid #bab9b9;text-align:center;height: 40px;" colspan="2">消費税（8%）</td> 63 <td><input type="text" name="tax" class="tax" style="margin:10px;" readonly="readonly"></td> 64 </tr> 65 <tr class="table-solid table-input"> 66 <td style="border:none;"></td> 67 <td style="border:none;"></td> 68 <td style="border: 1px solid #bab9b9;text-align:center;height: 40px;" colspan="2">合計</td> 69 <td><input type="text" name="all-sum" class="all-sum" style="margin:10px;" readonly="readonly"></td> 70 </tr> 71 </tbody> 72 </table> 73 </div>
$(function(){ $('table tbody tr.tbl-cnt').each(function(i){ $(this).find('.delete').attr("name", 'delete' + (i+1)); $(this).find('.item').attr("name", 'item' + (i+1)); $(this).find('.num').attr("name", 'num' + (i+1)); $(this).find('.unit-price').attr("name", 'unit-price' + (i+1)); $(this).find('.price').attr("name", 'price' + (i+1)); // 計算処理 フォーカスが外れたとき発生 var all; $(this).keyup(function() { all = 0; var num =$(this).find('.num').val(); var unit_price = $(this).find('.unit-price').val(); var price = $(this).find('.price'); if(num !== "" && unit_price !== "") { sum = num*unit_price; price.val(sum); $('.price').each(function() { if($(this).val() !== "") { all += sum + all; } }); $('input[name=tiny-sum]').val(all);console.log(all); } }); }); $('table').on('click', '#add-row', function() { var lenNum = $("table tbody").children().length; var namae = $("table tbody tr.tbl-cnt:last input[type=text]").attr('name'); var namaeNum = namae.replace(/[^0-9^.]/g,""); // 20個以上に行を増やすことはできない if(lenNum - 2 < 21) { var deleteName = 'delete' + (parseInt(namaeNum) + 1); var itemName = 'item' + (parseInt(namaeNum) + 1); var numName = 'num' + (parseInt(namaeNum) + 1); var unit_priceName = 'unit-price' + (parseInt(namaeNum) +1); var priceName = 'price' + (parseInt(namaeNum) +1); $('table tbody tr.tbl-cnt:last') .after('<tr class="table-solid table-input tbl-cnt"><td class="hide-td"><div class="hide-btn delete-btn"><span href="#" name="'+ deleteName +'" class="delete btn btn-success"><i class="fa fa-times fa-fw"></i></span></div></td><td><input type="text" name="'+ itemName +'" class="item" style="margin:10px;width: 450px;"></td><td><input type="text" name="'+ numName +'" class="num" style="margin:10px;"></td><td><input type="text" name="'+ unit_priceName +'" class="unit-price" style="margin:10px;"></td><td><input type="text" name="'+ priceName +'" class="price" style="margin:10px;"></td></tr>'); } else { alert('最大追加可能行数の20に達しました。\nこれ以上追加することはできません。'); return false; } }); $('table').on('click', '.delete', function() { var len = $("table tbody").children().length; if(len - 2 > 2) { var row = $(this).closest("tr").remove(); $(row).remove(); } else { alert('これ以上行を削除することはできません。'); return false; } }); });
###jsFiddle
https://jsfiddle.net/sLhfz1ye/36/
何卒宜しくお願い致します。
失礼いたしました。コードも記載しました
回答2件
0
こんな感じでどうでしょう？
javascript
1$(function(){ 2 $('.num,.unit-price').on('input',function(){ 3 var num=$(this).closest('tr').find('.num'); 4 var unit=$(this).closest('tr').find('.unit-price'); 5 var price=$(this).closest('tr').find('.price'); 6 price.val((num.val()=="" || unit.val()=="")?"":parseFloat(num.val())*parseFloat(unit.val())); 7 var sum=$(this).closest('table').find('.price').map(function(x){ 8 return $(this).val()!==""?parseFloat($(this).val()):0; 9 }).get().reduce(function(prev, current){ 10 return prev+current;; 11 }); 12 $(this).closest('table').find('.tiny-sum').val(sum==0?"":sum); 13 $(this).closest('table').find('.tax').val(sum==0?"":(sum*8)/100); 14 $(this).closest('table').find('.all-sum').val(sum==0?"":sum+(sum*8)/100); 15 }); 16});
投稿2018/02/19 06:02
総合スコア114769
0
ご自分が作ったプログラムがどうやって動作しているのか、console.logなどを使ってよく考えながらプログラミングをされることをおすすめします。
今回ですと、色々と直したいところはあるかと思いますが
javascript
1 $('.price').each(function() { 2 if($(this).val() !== "") { 3 all += sum + all; 4 } 5 });
この部分でconsole.logを使ってsumやallの値と$(this).val()の値を観察すればすぐにわかる問題かと思います。
実際に以下のようにconsole.logで観察してみると
javascript
1 $('.price').each(function() { 2 if($(this).val() !== "") { 3 all += sum + all; 4 console.log('----------'); 5 console.log(sum); 6 console.log(all); 7 } 8 });
1列目に数量:10、単価:100を入力した場合は
console
1---------- 21000 31000
２列目に数量:20,単価:200を入力すると
console
1---------- 24000 34000 4---------- 54000 612000
と値が変化しています。
このことから、１週目に all += 4000 + 0; が行われて、２週目に all += 4000 + 4000;が行われていることがわかります。
つまり、ここでsumを代入していること自体が間違っているわけです。
なので、代入する値を$(this).val()に直してあげます
javascript
1 $('.price').each(function() { 2 3 if($(this).val() !== "") { 4 all += parseInt($(this).val()) + all; 5 console.log('----------'); 6 console.log($(this).val()); 7 console.log(all); 8 } 9 });
すると以下の値になりました
console
1---------- 21000 31000 4---------- 54000 66000
1000+4000は5000のはずなので、まだ間違っています。
何がおかしいかというと、 allに+=の演算子を使っている部分ですね。
このままだとall = parseInt($(this).val()) + all + allをやっていることと同じになりますので
１週目にall = 1000 + 0 + 0;
２週目にall = 4000 + 1000 + 1000;
をやっていることになります。
なので、all = parseInt($(this).val()) + allもしくはall += parseInt($(this).val())に直してあげる必要があります。
すると以下の値になり、正しく計算ができていることがわかるかと思います。
console
1---------- 21000 31000 4---------- 54000 65000
あとはもう少しプログラムを単純化させると問題部分がわかりやすくなりますので、簡単に書くためにはどうすればいいかを考えるのもよろしいかと思います。
長々と失礼いたしました。
投稿2018/02/19 05:52
総合スコア50
あなたの回答
tips
プレビュー
