Jquery 計算方法について

次のコードで計算シートを作成しているのですが
各項目の構成率（合計額に対する割合）の部分が上手く動いてくれなくて行き詰ってしまいました。
このままのソースで動かした場合の結果は下の画像の状態になってしまいます。

form内の変更があった都度再計算してもらえるように「each(function()」にしてあるのですが。
各行の入力時の値を再計算してもらえません。

合計表示部分が変更された時に発火する様にした方がいいのかと思い
別に
$("#total").change(function(){
$(".quotation").each(function() {
//-----------------------------問題の部分
})
})
と記述してみたりしてみましたがダメでした。

こんな年の瀬に申し訳ありませんがこれを実現できる方法を教えて下さい。

HTML
1<html>
2<body>
3<form id="form" method="post" target="./">
4<table id="result">
5<tr>
6<th>合計 <input type="text" id="total" value=""disabled="disabled"/></th><!--合計表示部分-->
7</tr>
8</table>
9
10<table id="edit">
11<tr>
12<th>単価</th><th>数量</th><th>小計</th><th>構成率</th>
13</tr>
14<tr class="quotation">
15<td><input type="number" class="per" value="" /></td><td><input type="number" class="num" value="" /></td><td><input type="number" class="subtotal" value="" disabled="disabled" /></td><td><input type="text" class="comprate" value="" disabled="disabled" /></td>
16</tr>
17<tr class="quotation">
18<td><input type="number" class="per" value="" /></td><td><input type="number" class="num" value="" /></td><td><input type="number" class="subtotal" value="" disabled="disabled" /></td><td><input type="text" class="comprate" value="" disabled="disabled" /></td>
19</tr>
20<tr class="quotation">
21<td><input type="number" class="per" value="" /></td><td><input type="number" class="num" value="" /></td><td><input type="number" class="subtotal" value="" disabled="disabled" /></td><td><input type="text" class="comprate" value="" disabled="disabled" /></td>
22</tr>
23</table>
24</form>
25
26<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
27<script type="text/javascript">
28	$(document.forms["form"]).change(function(){
29		var TOTAL;
30		TOTAL=0;//合計リセット
31
32		$(".quotation").each(function() {
33		
34			var per = $(this).find('.per').val();	//単価入力値取得
35			var num = $(this).find('.num').val();	//数量入力値取得
36			var subtotal = per*num;					//小計算出
37			var SUBTOTAL = Math.round( subtotal );	//小計整数化
38			
39			$(this).find('.subtotal').val(SUBTOTAL);	//小計表示
40			
41			if(!num || !per){						//未入力の場合小計空欄
42				$(this).find('.subtotal').val('');
43			};
44			if(SUBTOTAL){
45				TOTAL = parseInt(SUBTOTAL)+TOTAL;		//合計額加算
46				$('#total').val(TOTAL);		//合計表示
47			}
48			
49      //-----------------------------問題の部分
50			var comprate = (SUBTOTAL/TOTAL)*100;			//構成率算出
51			var comprate = comprate.toFixed(1);	//構成率 フォーマット(小数点以下1位まで)
52			var comprate = comprate.toString();	//STRING化
53			var comprate = comprate+"\%";
54			$(this).find('.comprate').val(comprate);	//構成率表示
55			
56			if(!subtotal){							//小計が算出されていない場合構成率空欄
57				$(this).find('.comprate').val('');
58			};
59      //-----------------------------
60		
61		});
62		
63	});
64
65</script>
66
67</body>
68</html>
69

行動規範の内容に同意します

回答3件

ベストアンサー

http://jsdo.it/katoy/Y4Nt
に修正したコードをかいてみました。
ポイントは、小計計算のループと、構成比計算のループに分けたことです。
全部の小計を計算してからでないと、構成比は計算ができないからです。

投稿2015/12/29 09:11

katoy

総合スコア22324

退会済みユーザー

2015/12/29 11:01 編集

夕飯の支度でお返事がおそくなりまして申し訳ありません！>< すごい！動画まで添えて頂いて..ありがとうございます！片付けが終わりましたら　試させていただきます！取り急ぎ、本当にありがとうございます！

退会済みユーザー

2015/12/29 11:03

手前のソースで確認いたしました！完璧に理想通りの動作でした　おかげさまで安心して年が越せます本当にありがとうございました。

行動規範の内容に同意します

コードの動作をトレースすると
一行目の処理：TOTAL=100,SUBTOTAL=100,構成率=100%
二行目の処理：TOTAL=200,SUBTOTAL=100,構成率=50%
三行目の処理：TOTAL=300,SUBTOTAL=100,構成率=33%
TOTALが順次加算されているのに、「comprate = (SUBTOTAL/TOTAL)*100;」毎行これを計算しているのでこのような結果になっています。

解決方法はいろいろあると思いますが、とりあえず動作すればいいなら
簡単なのは「$(".quotation").each(function() {」の前で別途TOTALを計算してしまうことです。
※恐らくコードは不恰好になり無駄な処理も増えるので、後でリファクタリングしたほうが良いと思いますけど。

投稿2015/12/29 08:34

編集2015/12/29 08:35

hirohiro

総合スコア2068

退会済みユーザー

2015/12/29 11:03 編集

夕飯の支度でお返事がおそくなりまして申し訳ありません！>< 間違ってたところがはっきり解かってスッキリしました。ありがとうございます。

行動規範の内容に同意します

javascript
1var comprate = (SUBTOTAL/TOTAL)*100;   //構成率算出
2var comprate = comprate.toFixed(1);    //構成率 フォーマット(小数点以下1位まで)
3var comprate = comprate.toString();    //STRING化
4var comprate = comprate+"\%";

同じ変数名で何度も定義しているようですが。。。

javascript
1var comprate = (SUBTOTAL/TOTAL)*100;   //構成率算出
2comprate = comprate.toFixed(1);        //構成率 フォーマット(小数点以下1位まで)
3comprate = comprate.toString();        //STRING化
4comprate = comprate+"\%";

でどうでしょうか。

投稿2015/12/29 07:44

hyper-drums-ko

総合スコア736

退会済みユーザー

2015/12/29 07:55

回答ありがとうございます。私の書き方「var」が無駄に多いんですね（//･_･//) ご指摘ありがとうございます！これから気を付けます(* v v) ご指摘の通り定義部分を修正して　ついでに var SUBTOTAL = Math.round( subtotal ); //小計整数化　　　　↓ SUBTOTAL = Math.round( subtotal ); //小計整数化ここも直しましたが　結果は同じでした

行動規範の内容に同意します

あなたの回答